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

Par contre, utiliser des <table> pour faire ta mise en page, ce n'est pas très bon. Regarde dans les cours CSS, tu trouveras des articles à ce sujet.

ju0123456789 · 24/03/2011, 15h53

Oui je sais bien que c'est pas terrible mais bon on fais avec ce qu'on a

Ok merci je testerais demain, là je dois finir un auter truc sur lequel j'ai bloqué lol

Merci je te tiens au courant si résolu ou pas xD

23/03/2011, 13h56	#1
ju0123456789 Membre du Club Inscription : avril 2008 Messages : 245 Détails du profil Informations personnelles : Âge : 27 Localisation : France Informations forums : Inscription : avril 2008 Messages : 245 Points : 40 Points : 40	background étirable uniquement en hauteur et répété en largeur 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
	00

23/03/2011, 14h59	#3
ju0123456789 Membre du Club Inscription : avril 2008 Messages : 245 Détails du profil Informations personnelles : Âge : 27 Localisation : France Informations forums : Inscription : avril 2008 Messages : 245 Points : 40 Points : 40	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
	00

24/03/2011, 09h12	#5
ju0123456789 Membre du Club Inscription : avril 2008 Messages : 245 Détails du profil Informations personnelles : Âge : 27 Localisation : France Informations forums : Inscription : avril 2008 Messages : 245 Points : 40 Points : 40	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 ?
	00

24/03/2011, 09h16	#6
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	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.
	00

24/03/2011, 09h21	#7
ju0123456789 Membre du Club Inscription : avril 2008 Messages : 245 Détails du profil Informations personnelles : Âge : 27 Localisation : France Informations forums : Inscription : avril 2008 Messages : 245 Points : 40 Points : 40	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
	00

24/03/2011, 09h39	#9
ju0123456789 Membre du Club Inscription : avril 2008 Messages : 245 Détails du profil Informations personnelles : Âge : 27 Localisation : France Informations forums : Inscription : avril 2008 Messages : 245 Points : 40 Points : 40	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
	00

24/03/2011, 11h04	#10
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	A ce moment, peux tu fournir le code HTML et CSS ?
	00

24/03/2011, 15h53	#13
ju0123456789 Membre du Club Inscription : avril 2008 Messages : 245 Détails du profil Informations personnelles : Âge : 27 Localisation : France Informations forums : Inscription : avril 2008 Messages : 245 Points : 40 Points : 40	Oui je sais bien que c'est pas terrible mais bon on fais avec ce qu'on a Ok merci je testerais demain, là je dois finir un auter truc sur lequel j'ai bloqué lol Merci je te tiens au courant si résolu ou pas xD
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email