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%;
}

**ju0123456789** · 24/03/2011, 09h12

Et il faut que je fasse un z-index:0 sur l'image et sur le reste du document un z-index > 0 pour que ça passe derriere ?

**ornitho13** · 24/03/2011, 09h16

non ce n'est pas utile étant donné que l'<img> est défini en premier dans le document HTML, il sera donc à l'arrière plan.

**ju0123456789** · 24/03/2011, 09h21

pour moi ça ne marche pas.
ça mets uniquement que quelques elements en avant plan, mais l'image fait la hauteur de la fenetre, et non pas la hauteur de la page. Arf c'est pas évident

**ornitho13** · 24/03/2011, 09h22

ah oui, essaye plutot cela :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
html, body{
width:100%;
height:100%
margin:0;
padding:0;
}
.background{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}

--edit--
Si tu pouvais mettre en lien, histoire de voir le rendu, merci

**ju0123456789** · 24/03/2011, 09h39

Avec ta derniere solution, l'arriere plan n'apparait meme pas. Et je veux bien te mettre un lien, mais le souci c'est que mon serveur de test n'est accessible qu'en local chez nous donc je ne peux pas

**ornitho13** · 24/03/2011, 11h04

A ce moment, peux tu fournir le code HTML et CSS ?

**ju0123456789** · 24/03/2011, 13h31

Bah j'avoue que c'est un peu compliqué. Je reprends un site déjà existant.
MAis grosso merdo ça donne ceci (en simplifié ) :

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
 
<body>
<img src="/images/menu/body/background.jpg" class="bg" />
<a name="debut"></a>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width:982px;"> 
  <tr>
    <td colspan="2" height="83"><?php $NbArticlesPanier = CalculNbArticles(); HeadLine( $FontColor, $NbArticlesPanier, $GPU ); ?></td>
  </tr>
  <tr>
    <td height="18" valign="top" align="center" width="858">
    <div align="center">
      <table border="0" cellspacing="0" cellpadding="0" align="right" style="width:982px;">
        <tr>
          <td><?php include_once("menu.php"); ?></td>
        </tr>
      </table></div>
    </td>
  </tr>
  <tr>
    <td height="572" colspan="2" width="858" valign="top">
      <div id="Corps"><!-- MON CONTENU -->  </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><?php include_once("pied-de-page.php"); ?></td>
  </tr>
</table>
</body>

Et le cssque tu m'as gentillement fournit

:

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
 
html, body
{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
#Corps
{
  background-color:#fff;
  height:100%;
  width:982px;
} 
 
.bg
{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}

Je ne sais pas si ça va t'aider ^^ :/

**ornitho13** · 24/03/2011, 14h30

Bon et bien il fallait bien jouer sur le z-index... Je pensais que l'on aurait pu l'ommettre.
Enfin bref voici le code :

Code html :

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
 
<body>
<div class="bg">
	<img src="/images/menu/body/background.jpg" />
</div>
<a name="debut"></a>
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width:982px;"> 
  <tr>
    <td colspan="2" height="83"><?php $NbArticlesPanier = CalculNbArticles(); HeadLine( $FontColor, $NbArticlesPanier, $GPU ); ?></td>
  </tr>
  <tr>
    <td height="18" valign="top" align="center" width="858">
    <div align="center">
      <table border="0" cellspacing="0" cellpadding="0" align="right" style="width:982px;">
        <tr>
          <td><?php include_once("menu.php"); ?></td>
        </tr>
      </table></div>
    </td>
  </tr>
  <tr>
    <td height="572" colspan="2" width="858" valign="top">
      <div id="Corps"><!-- MON CONTENU -->  </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><?php include_once("pied-de-page.php"); ?></td>
  </tr>
</table>
</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
 
html, body
{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
#Corps
{
  background-color:#fff;
  height:100%;
  width:982px;
} 
 
.bg
{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:-1;
}
.bg img{
width:100%;
height:100%;
}