Image de fond body et redimensionnement de la fenêtre

**w4w4r7b** · 14/03/2016, 23h05

Bonjour

Je cherche a avoir une image de font qui s’étire de façon a toujours remplir la page or pour l'instant j'y arrive uniquement avec Firefox (essais avec la version 41.0.1) et safari (essais avec la version 5.1.7) mais vu le code utilisé je trouve que c'est pas top car une partie de la mise en page est dans le html.

Voila mon code au cas ou quelqu'un aurais une piste pour avoir un code fonctionnant sur plus de navigateurs (idéalement sur tous) et avec une bonne séparation entre le contenu et la mise en page.

index.html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Mon beau site</title>
		<link rel="stylesheet" type="text/css" href="test.css" />
	</head>
	<body>
		<img id="bg" src="drapeau.svg" />
		<div id="bg2"></div>
		<p>Lorem ipsum dolor sit amet, ... cursus.</p>
		<p>Cum sociis natoque penatibus ... sapien.</p>
		<p>Nulla ut faucibus dui. Nam at ... turpis.</p>
		<p>Donec in quam commodo, ... congue.</p>
		<p>Aenean volutpat non lacus ... risus.</p>
	</body>
</html>

test.css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#bg{
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: -20;
}
 
#bg2{
	position: fixed;
	z-index: -10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
}

**Azerx** · 15/03/2016, 10h26

Pour mettre une image en background sur ta page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
body {
background-image:url(images/image_de_fond.png);
}

**w4w4r7b** · 15/03/2016, 21h34

je connais déjà cette propriété mais cela je permet pas d'avoir une image qui s’étire (horizontalement et verticalement)

voila mon essais avec cette propriété

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
body{	
	background-image : url(./drapeau.svg);
	background-repeat : repeat-y;
	background-attachement : fixed;
	background-position : center top;
	background-size : 100%;
}

**Azerx** · 16/03/2016, 10h00

Quel a été le résultat avec ce code?

Tu as essayé en ne gardant que:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
body{	
	background-image : url(./drapeau.svg);
	background-size : 100%;
}

Invité · 16/03/2016, 10h06

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<body>
  <div id="bg"></div>
  <div id="bg2"></div>
.....
</body>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
* {
  margin: 0;
  padding: 0;
}
 
html,
body {
  position: relative; /* IMPORTANT */
  width: 100%; /* IMPORTANT */
  height: 100%; /* IMPORTANT */
  min-height: 100%;
}
 
#bg {
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(./drapeau.svg) top center no-repeat;
  background-size: cover; /* couvre toute la surface */
}
 
#bg2 {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
}

**Azerx** · 16/03/2016, 10h37

J'avais aussi vu ce code qui me parraissait compliqué pour la simple tâche qu'il y avait à faire. Bien joué

Invité · 16/03/2016, 11h26

Voir :

background-size

background-size (extrait)
est l'un des mots-clés suivants :

contain, qui spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi grande que possible tout en assurant que les deux dimensions sont plus petites ou égales aux dimensions de la surface de positionnement.
cover, qui spécifie que l'image d'arrière-plan doit être mise à l'échelle pour être aussi petite que possible tout en assurant que les deux dimensions soient supérieures ou égales aux dimensions de la surface de positionnement.

ou une ou deux des valeurs suivantes, indiquant respectivement la dimension horizontale et la dimension verticale (si seulement une des deux est précisée, la seconde est définie à auto) :

une valeur <pourcentage> qui met à l'échelle l'image d'arrière-plan aux dimensions correspondant à la surface de positionnement de l'arrière-plan, qui est définie par la valeur de background-origin. La surface de positionnement de l'arrière-plan est, par défaut, la surface contenant le contenu et les marges de remplissage (padding) ; la surface peut aussi être modifiée au contenu seulement ou à la zone contenant les bordures, les marges de remplissage et le contenu. Si la propriété attachment est définie à fixed, la zone de positionnement est alors toute la surface d'affichage du navigateur, excluant les zones couvertes par les barres de défilement si elles sont présentes. Les pourcentages négatifs ne sont pas acceptés.
une valeur <longueur> qui met à l'échelle l'image d'arrière-plan en mettant la dimension correspondant à la valeur définie. Les longueurs négatives ne sont pas acceptées.
le mot-clé auto qui met à l'échelle l'image d'arrière-plan dans la direction correspondante de manière à conserver les proportions de l'image originale.

A lire aussi la section "Compatibilité des navigateurs".

Image de fond body et redimensionnement de la fenêtre

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager