Image de Fond D'écran sur toute la page

**djamess** · 17/02/2009, 18h35

Bonjour à vous!

J'aimerai que mon image de fond d'écran s'affiche sur toute la page quelque soit la taille et la résolution de l'écran.

J'ai écris dans mon CSS cec

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
BODY {
  background: #ffffff;
  color: #000000;
  margin: 53px;
  width: 100%;
  background-image : url('/mon image.jpg'); 
  background-repeat: no-repeat ;
  background-position:top; /* sa position, l'image commence en partant du haut */
 
}

Cepandant sur mon ordinateur portable tout va bien.
Mais quand je regarde ma page web sur un écran 22 pouces là mon image ne s'étire pas. Elle prend juste une partie de l'écran.

Je souhaiterai que quelque soit l'cran et le navigateur mon image de fond puisse s'étire et s'adapter.

Y a-t-il une méthode pour ça?

Merci de vos réponses.

Bonne fin de journée à vous

**desert** · 17/02/2009, 18h52

Malheureusement, le background-image ne peut que se répéter, il ne s'étire donc pas. La seule solution est de mettre ton image dans une balise img en position absolue.

Code html :

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

<img id="bg" src="mon image.jpg" alt="" />

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
body, html {
    margin: 0;
    width: 100%;
    height: 100%;
}
 
img#bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

**djamess** · 17/02/2009, 19h12

Merci bcp pour ton aide!
C'est déjà une bonne solution qui me permet d'avancer!
Merci encore

**djamess** · 17/02/2009, 19h45

Ah non je viens de me rendre comte d'un truc très gênant!

Quand je fais ce que tu me proposes ça marche en effet!

mon image de fond prend tout l'écran ça couvre tout!

Cependant je n'arrive pas à remettre en premier plan le reste c'est à dire
mes cadres, mon texte....

Aïe aïe aïe...

**GihefBey** · 17/02/2009, 20h58

Bonjour,

Si tu places ton image en premier dans le <body>, le reste devrait se placer par dessus.
Sinon, ajoute un z-index au contenu.

Des exemples ici avec

Code html :

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

1
2
3
<body>
  <img id="fond" src="imgbg.jpg" alt="l'image de fond" title="l'image de fond" />
  <div id="conteneur">

Code css :

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

1
2
3
4
5
    #fond { /* c'est l'image */
      display : block;
      width : 100%;
      height : 100%;
      }

-

**djamess** · 18/02/2009, 11h18

Bonjour GihefBey,

Merci de ta réponse!

Mais comment faut-il faire pour définir un z-index par rapport au code que tu me proposes?

Le z-index va permettre de rammener en premier plan tout le reste du contenu de la page web?

Merci de vos réponses

**djamess** · 18/02/2009, 14h17

Bonjour GihefBey,

En effet c'est mieux, j'ai mon image de fond qui passe bien derrière le reste.
Je n'ai pas intégré le z-index dont tu me parlais. Par contre je veux bien en savoir plus à ce sujet.

Cependant, mon image de fond est décalée!Elle ne prend pas toute la page non plus.

J'ai mis ça dans mon fichier header.php

Code :

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

1
2
 
<img id="fond" src="image.gif" alt="l'image de fond" title="l'image de fond" />

J'ai mis ça dans ma feuille de style :

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
 
img#fond { /* c'est l'image */
	  position: absolute;
      display : block;
      width : 100%;
      height : 100%;
      }
 
#conteneur {
      position : absolute;
      top : 0;
      left : -400px;
      margin-left : 50%;
      width : 760px;
      }

Je souhaiterai que mon image prenne l'ensemble de ma page web.

**GihefBey** · 18/02/2009, 14h45

Compare ton code et le mien.
Retire ce qu'il y a en trop dans le style de l'image.
Et reprends le code de mon exemple et constate que les marges ont été annulées dans les <HTML> <BODY>.
Fais-en autant.

Code css :

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

1
2
3
4
5
    html, body {
      margin: 0;
      padding: 0;
...
      }

Quant au z-index, je m'en sers rarement.
L'ordre d'apparition des éléments HTML dans le code est en général suffisant.
La preuve.

**mariepierre** · 22/02/2009, 10h51

Bonjour,

j'ai aussi ce problème de background.
J'ai été voir le site indiqué un peu plus haut,où il y a des explications et les codes.
Quand je fais le test ça marche impec, mais comment construire un site à partir de ça ?

Je m'explique :
avant de découvrir ces explications, j'avais déjà commencé la mise en page de mon site : une div bandeau, une div menu, une div news, une div contenu central, bref quelque chose qui ressemble beaucoup à ce qu'on peut voir dans la galerie de ce site pour la mise en page.
Et quand j'essaie d'adapter le code pour le background, seul le bandeau(en flash) apparait à l'endroit voulu, le reste se retrouve après.
En épuré mon code html ressemble à ca :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
 
<body>
 
<div id="page" style="margin:0 auto; width:960px">
	<div id="bandeau">
	</div>
 
	<div align="center">
 
		<div id="menu">
			<div id="menu_haut">
				<table width="82%" border="0" cellspacing="1" cellpadding="0" align="left">
				</table>
			</div>
		</div>
 
		<div id="contenu">
			<div id="news">
				<div id="bloc_news">
					<table width="93%" border="0" cellspacing="10px" cellpadding="0">
					</table>
 
 
				<div id="bloc_news1">
					<table width="93%" border="0" cellspacing="10px" cellpadding="0">
					</table>
				</div>				
			</div>
		</div>
 
		<div align="center"> <br> <br>
			<table width="540px" align="left" border="0" cellspacing="0" cellpadding="0" style="text-align:justify">
			</table>
		</div>
	</div>
 
	<div class="footer" id="pied_page">
		<table width="93%" height="36" border="0" align="center" cellpadding="0" cellspacing="0">
		</table>
	</div>
 
</div>
</div>
</body>

et mon 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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
 
div {
	text-align:center;
	}
 
body {
background-image:url(../img/background.jpg);
background-position:top;
background-attachment:scroll;
background-repeat:no-repeat;
}	
div#bandeau {
	width:960px;
	height:464px;
	background-color:##fdfdf0;
	margin-top:-15px;
	}
#page{margin-top:0px; width:960px;/*border:solid; border-width:3px; border-color:#633e1e;*/}
 
div#menu {
	float:left;
	width:200px;
	height:800px;
	background-color:#fdfdf0;
	}
 
div#menu_bas {
	width:190px;
	height:200px;
	background-color:#fdfdf0;
	}
div#contenu {
	float:left;
	width:760px;
	height:800px;
	background-color:#fdfdf0;
	}
 
div#news {
	float:right;
	width:200px;
	height:800px;
	background-color:#fdfdf0;
	} 
 
div#bloc_news {
	width:200px;
	height:450px;
	background-color:#fdfdf0;
	}
div#bloc_news1 {
	width:200px;
	height:290px;
	background-color:#fdfdf0;
	}
div#pied_page {
	clear:both;
	width:960px;
	height:35px;
	background-color:#A9E466;
	}

Je donne ici les codes sans l'astuce pour le background.

Quelqu'un peut-il m'aider à mettre en place un background qui s'adapte à la taille de l'écran tout en mettant tous les éléments en premier plan ?

Merci

**GihefBey** · 22/02/2009, 13h31

Bonjour,

Relis les fil de ce post.

Envoyé par desert

La seule solution est de mettre ton image dans une balise img

Ensuite, regarde les exemples que je propose.
Reprends-en le code et constate que les éléments de la page ont été placés dans un conteneur positionné en absolute.
Le premier est élastique, le deuxième est de taille fixe.

-

**mariepierre** · 22/02/2009, 14h53

oui ça je l'ai fait.
et, comme je le dis ci-dessus, les autres éléments se placent après.

**Ethyde** · 23/02/2009, 00h50

A vue de nez c'est les flottants qui ne sont pas "nettoyé" par des clear, du coup il ne sont pas prit en compte dans la hauteur de la page.

Si tu avais une adresse pour voir

Image de Fond D'écran sur toute la page

CSS

Discussions similaires

Partager

Partager