background étirable uniquement en hauteur et répété en largeur

**ju0123456789** · 23/03/2011, 13h56

Bonjour,

Petite question assez simple je pense.
J'ai un background qui se répète en largeur comme en hauteur (logique).
Mais je voudrais que mon background (en CSS) ne se répète qu'en largeur (repeat-x), et puisse s'étirer à la hauteur de la page complète.

Est-ce possible, et si oui pouvez-vous me dire comment procéder svp ?

Merci

**ornitho13** · 23/03/2011, 14h51

Salut,

tu peux tenter avec une propriété CSS3 background-size qui n'est pas compatible avec de vieux navigateurs tels que IE6 à IE8 :

Code css :

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

1
2
3
4
5
 
.monfond{
   background: url(monimage.extension);
   background-size:100% 100%;
}

cette propriété permet d'étirer l'image utilisée dans la propriété background.
Tu devras utiliser les préfixes propriétaires si tu veux l'utiliser sur les différents navigateurs :

Code :

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

1
2
3
4
5
 
-webkit-background-size:100% 100%;
-moz-background-size:100% 100%;
-o-background-size:100% 100%;
background-size:100% 100%;

**ju0123456789** · 23/03/2011, 14h59

Bonjour et merci de ta réponse.
Il est vrai que je ne regarde pas trop du coté de CSS3 vu le "peu" de taux de compatibilité. Il va falloir que je commence a y regarder...

Oui le rendu sous Chrome c'est exactement ce que je voulais.
Mais pour mes visiteurs marchant encore sous IE7 non

Existe t il une solution de secours pours IE6,7,8 ?

Merci

**ornitho13** · 23/03/2011, 15h11

Une solution serait d'utiliser directement une balise <img> que tu places en premier dans ton document et qui servira de fond :

Code html :

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

1
2
3
4
5
 
<body>
   <img src="image.extension" class="background"/>
   ... <!-- reste de ton contenu de la page -->
</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
 
html, body{
width:100%;
height:100%
margin:0;
padding:0;
}
.background{
position:absolute;
top:0;
width:100%;
height:100%;
}