Images de fond dans un site centré

Bonjour à tous,

Je fais un site centré avec largeur fixe.
J'utilise déja une image de fond repétée dans la balise body.
J'aimerais disposer une image de fond à gauche de mon conteneur principal et une autre à droite mais sans générer un scroll horizontal (qui se comporterait comme si on les avait mis dans la balise body).
Je sais que cela est possible en utilisant un tableau et en mettant les cellules de gauche et de droite à 50% dela largeur mais j'aimerais éviter cette solution.
J'ai tenté de le faire avec des div à 50% en float left et right mais je ne m'en sort pas.

Voilaaaa, si quelqu'un à un début de piste...
Un grand merci d'avance et bonne journée à tous.

Nicolas
Modifié par Nicolas (03 Aug 2007 - 10:52)

bonjour,

En faite tu veux mettre des images de fond dans les div ? cela est possible.

Pour ceux que tu demandes a tu essyais en decoupant ta page en 3 div. Apres tu les positionne comme tu veux avec un float: left sans dout et tu ajout un background-image:url() dans tes balise de gauche et droite.

Merci pour ta réponse,

Le problème, en fait, est qu'en positionnant un div à gauche et à droite cela ajoute de la largeur au site et que je n'utilise ces conteneurs que pour y placer une image de fond. J'aimerais donc que, lorsqu'on redimensionne son navigateur, le scroll horizontal n'apparaisse pas en passant au dessus de ces div.

En testant un peu j'ai réussi à mettre mon image de gauche en faisant comme ceci :

 <div id="conteneur">
    <div id="bg_gauche"></div>
 </div>

et le css

body 
{
	background:#1d2421 url(images/bg_body.jpg) repeat-x top center;
	font: 12px Arial, Verdana, Trebuchet ms;
	margin: 0;
	padding:0;
	color:#fff;
	text-align:center;
}
#conteneur
{
	width: 920px;
	margin: 0 auto;
	padding:0;
	border-left:1px dashed #fff;
	border-right:1px dashed #fff;
	position:relative;
	text-align:left;
}
#bg_gauche
{
	width:122px;
	background:#1d2421 url(images/bg_gauche.jpg) no-repeat top right;
	float:left;
	height:360px;
	position:absolute;
	left:-123px;
	}

Et cela fonctionne, il n'y a pas de scroll horizontal en passant au dessus
du "bg_gauche". Je trouvait cela étonnant vu que lui donnait une largeur mais j'imagine que c'est parcequ'il se trouve à l'intérieur du conteneur principal... j'essaye donc la même chose avec le "bg_droite" en faisant ceci :

 <div id="conteneur">

    <div id="bg_droite"></div>

    <div id="bg_gauche"></div>

 </div>

et le css:

#bg_droite
{
	width:52px;
	background:#1d2421 url(images/bg_droite.jpg) no-repeat top left;
	float:right;
	height:360px;
	position:absolute;
	right:-53px;
	}

et là j'ai un scroll en passant dessus !

Je me permets de relancer le sujet, j'ai réèllement cherché de mon côté, sans succès...

Bonjour,

Float et absolute, il faut choisir ...
Révision des bases de positionnement indispensable avant d'aller plus loin !

Je suis absolument confu de cette grossière erreur. En tentant de régler ce problème et en ayant le nez dessus tout le temps, je ne me sui même plus rendu compte que c'était devenu n'importe quoi. Grand merci.
J'ai donc retiré mes propriétés float :

 <div id="conteneur">
    <div id="bg_gauche"></div>
    <div id="bg_droite"></div>
 </div>

css

#bg_gauche
{
	width: 122px;
	background: #1d2421 url(images/bg_gauche.jpg) no-repeat top right;
	height: 360px;
	position: absolute;
	left: -123px;
}
#bg_droite
{
	width: 52px;
	background: #1d2421 url(images/bg_droite.jpg) no-repeat top right;
	height: 360px;
	position: absolute;
	right: -53px;
	top:0;
}

J'ai toujours le même problème mais je vais relire la théorie.

Re,

Question subsidiaire : Les colonnes latérales c'est pour la déco ou il y a du texte à l'intérieur?

Uniquement déco...
C'est juste 2 images de fond.
Je voudrait qu'elles réagissent comme si il s'agissait de l'image de fond de la balise body, c'est-à-dire sans provoquer de scroll.

Re,

Plusieurs cas de figure sont possibles, pour t'aiguiller il nous faudrait au pire un screen shot au mieux une page en ligne

Voici


Donc le bg_gauche se trouve à l'intérieur du conteneur mais en position absolue négative. Même chose pour le bg_droite, cependant si je réduis la fenêtre le bg_gauche passe sans provoquer de scroll horizontal tandis que le bg_droite en provoque un.
Un grand merci de te pencher sur ce problème.

Bonjour,

Pour simplifier, je ferais une image (background-repeat: no-repeat) en background pour un conteneur global (avec une couleur de fond ton gris: image reprenant juste la partie haute jusqu'à la fin du dégradé) et de width à determiné.
Ton conteneur global centré (margin: 0 auto) et ton conteneur principal placé correctement avec un margin-left adéquat.
Body: même chose que global pour le background (sans l'image, juste le dégradé)

Si j'ai bien compris, j'engloble mon conteneur avec un autre, plus large ou je place mon image de fond, mais dans ce cas, le conteneur "global" aura un "width" et provoquera danc un scroll horizontal à son passage, il me semble.
Modifié par Nicolas (08 Aug 2007 - 12:13)

ok, j'ai compris, le "width" n'était pas pour le conteneur globall mais pour l'image de fond. Je vais essayer ça.

Nicolas a écrit :
mais dans ce cas, le conteneur "global" aura un "width" et provoquera danc un scroll horizontal à son passage, il me semble.

Il me semble aussi.

À vue de nez, la solution consiste à ne faire qu'une seule image de fond, appliquée à body et positionnée ainsi: background-position: center top;. Cette image de fond devra donc reprendre à la fois le dégradé et le motif.

Problème: attention au poids de l'image! On aura probablement besoin d'une image en JPEG, avec une largeur dans les 1500-2000px (affichée en repeat-x, tant qu'à faire).

Sinon, une solution moins propre mais qui permet d'utiliser des images moins lourdes:

[b]HTML:[/b]
<body>
<div id="global">
<span id="deco1"></span>
<span id="deco2"></span>

Ici tout le contenu du site...

</div><!-- fin de div#global -->
</body>

[b]CSS:[/b]
body {
margin: 0; padding: 0;
background: gray url(fond-degrade.png) repeat-x center top;
}
div#global {
[#blue]position: relative;[/#]
width: 920px;
margin: 0 auto;
}
span#deco1 {
position: absolute;
top: 0;
left: -100px;
width: 100px;
height: 600px;
background: url(fond-deco-gauche.jpg) no-repeat left top;
}
span#deco2 {
position: absolute;
top: 0;
right: -50px;
width: 50px;
height: 600px;
background: url(fond-deco-droite.jpg) no-repeat left top;
}

Quelque chose du genre...
Dans cet exemple, on a donc trois images: une pour le dégradé, et une pour chaque bidule de déco sur les bords.

En fait c'est ce que je faisait dans le code noté un peu plus haut

<body>
<div id="conteneur">
    <div id="bg_droite"></div>
    <div id="bg_gauche"></div>
 </div>
 </body>
 
 css:
 
 body 
{
	background:#1d2421 url(images/bg_body.jpg) repeat-x top center;
	font: 12px Arial, Verdana, Trebuchet ms;
	margin: 0;
	padding:0;
	color:#fff;
	text-align:center;
}
/*CONTENEUR PRINCIPAL*/
#conteneur
{
	width: 920px;
	margin: 0 auto;
	padding: 0;
	border-left: 1px dashed #fff;
	border-right: 1px dashed #fff;
	position: relative;
	text-align: left;
}
/*IMAGE DE FOND GAUCHE*/
#bg_gauche
{
	width: 122px;
	background: #1d2421 url(images/bg_gauche.jpg) no-repeat top right;
	height: 360px;
	position: absolute;
	left: -123px;
}
/*IMAGE DE FOND DROITE*/
#bg_droite
{
	width: 52px;
	background: #1d2421 url(images/bg_droite.jpg) no-repeat top right;
	height: 360px;
	position: absolute;
	right: -53px;
	top:0;
}

mais j'ai toujours ce problème de scroll à droite.