Afficher image de fond dans une div

**awalter1** · 29/02/2012, 18h14

Bonjour,
J'ai une page web divisée en 4 parties contigus : header, menu, footer, content. J'ai réussi à positionner correctement en css les 4 zones dans ma page. Je veux afficher dans la partie "content" une image de fond via css. L'image n'est affichée qu'en partie, cela dépends en fait de la quantité de texte affiché dans cette div!
Je voudrais avoir l'image de fond complète. Voici mon code 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
/* logo : partie en haut à gauche : w=205  h=61 */
#logo {
	width		: 210px;
	height	: 90px;
	position	: fixed;
	top		: -10px;
	left		: 10px;
}
/* menu : partie à gauche */
#menu {
	background  : #6c123c;
	width		: 220px;
	height	: 100%;
	position	: fixed;
	top 		: 80px;
	left		: 0px;
}
/* header : partie en haut */
#header
{
	background      : #6c123c;
	border-bottom   : 2px solid #dedede;
	width			: 100%;
	height                : 90px;
	position		: fixed;
	top			: -10px;
	left			: 0px;
}
/* footer : partie en bas */
#footer
{
	background  : #6c123c;
	border-top   : 2px solid #dedede;
	width		 : 100%;
	height         : 30px;
	position	 : fixed;
	bottom	 : 0;
	left		 : 0px;
	}
/* content : partie centrale */
#content
{
	background-image: url(Images/image_de_fond.jpg);
	background-repeat: no-repeat; 
	margin-top 		: 85px;
	margin-left		: 218px;
}

Et l'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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
    <title>Peindre &agrave; Margency</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="StyleDefault.css" type="text/css">
</head>
 
<body bgcolor="#EFEFDC" >
 
<div id="header"> 
  <p align="center">TITRE</p> 
</div>
<div id="logo">
</div>
<div id="menu">
  <p align="center">menu</p> 
</div>
<div id="content"> 
  <p> Début ! Praetera ertam splendor quicumpe adurit insinuando. Lopsem irem 
    et tenebri, contra si tendere pergas proptera quia uis magnat ipsius, aear 
    per purum gratuite simultanecra feruntur, et feriunt oculos turbantia compos-tturas. 
    Praetera ertam splendor quicumpe adurit saepe oculos, ideo quod simina possedit 
    ignis multa, dolorem oculis quae gignat insinuando. Lurida praetera tuente 
    arquati luroris de corpore pollariste omnia autem. Ne simultarer ubi priacor, 
    e trabis, hoc ubi suffugit sensum, quadi sed quasi cum coram conderinum umbraque 
    existum oculos agimus. </p>
</div>
<div id="footer">
    <p>date et heure</p>
</div>
 
</body>
</html>

Merci de votre aide

**awalter1** · 29/02/2012, 19h26

Je trouvais dans un exemple simlilaire à ce que je fais, que dans le fichier html les div des 4 parties de la page sont hierarchiquement imbriquées :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="hg">
 <div id="hd">
  <div id="bg">
   <div id="bd">
    <div id="contenu">
    <h1>Les quatre coins</h1>
    <p> [bla bla]</p>
    </div> <!-- /contenu -->
   </div> <!-- /bd -->
  </div> <!-- /bg -->
 </div> <!-- /hd -->
</div> <!-- /hg -->

alors que moi je les ai au même niveau.
Cela fait t'il une différence ?
Merci

**sebhm** · 29/02/2012, 21h35

bonjour,

tu peux t'en sortir avec ta structure.
Le DIV "content" prend la hauteur necessaire pour afficher le texte qu'il contient, donc l'image n'est visible que sur cette hauteur.
En ajoutant un

Code :

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

min-height : 200px

et en mettant par exemple à la place de 200 la hauteur de ton image, tu es sûr de la voir tout le temps.

**awalter1** · 29/02/2012, 23h06

C'est une bonne idée.
Par contre, il faut tenir compte de la taille de la fenêtre qui peut varier. Si je la rétréci trop, mon image recouvre le "footer".
Je vais approfondir ce point.
Merci

Afficher image de fond dans une div

CSS

Vue hybride

Discussions similaires

Partager

Partager