Discussion :

[Ismaël(l)]

Bonjour,

J'ai un lèger souci : je fais un conteneur d'une certaine largeur (en % pour les problèmes de résolution) et je veux mettre un fond à ce conteneur.
Comment mettre la taille du background en % afin qu'il soit de la même largeur que le conteneur?
Voici le code

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
#content {
	width: 55%;
	background: #000000 url(images/c_bottom.jpg) no-repeat bottom center;
	color: #ffffff;
	padding-bottom: 5px; 
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 12px;
	position: relative;
	float: left;
	line-height: 12px; }

Merci d'avance.

[Bisûnûrs]

Trouvé sur Internet en quelques minutes :

Une image mise en arrière-plan (background-image) ne s'étire pas, elle ne fait que se dupliquer.

Pour réaliser un arrière-plan étirable, il faut utiliser une image (balise img) et non un background en CSS. Voici une méthode…

Le principe général est de donner les dimensions 100% à l'image, qui occupera alors toute la place de son conteneur (div, cellule,…). Ensuite, pour pouvoir afficher un texte par dessus, il faut donner une position à ce texte (absolu ou relatif).

Attention : avec cette méthode, l'image risque d'être très déformée puisque les proportions (hauteur / largeur) ne sont pas respectées.Si vous voulez que les proportions soient gardées, il vous suffit de ne spécifier que la dimension qui devra s'élargir (width OU height)… l'autre dimension va s'adapter mais dans ce cas n'occupera plus 100% de l'espace.

Exemple d'un arrière plan sur le document entier (body)

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
html, body {
   margin:0;
   padding:0;
   height: 100%;
   width: 100%;
}
#arriere{
/* l'image occupe toute la place du body */
   width : 100%;
   height: 100%;
}

Code HTML :

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

<img id="arriere" alt="" src="nomdelimage.jpg" />