Mise en forme image de fond selon resolution

**bdorbo** · 12/04/2009, 21h16

Bonjour,

J'ai un probleme avec une div.
Je souhaiterais que l'image de fond à gauched'une div soit caché ou se "dissimule" avec une résolution 1024*768 ou lorsqu'on diminue la largeur de la fenetre comme sur ce lien :
http://www.lapetitefabricdebijoux.co...tpage&Itemid=1.
J'ai mis un margin-let de la largeur de l'image du colier qui semble "bloquer".

Voici le site ou l'image de fond reste fixe et donc on a une grande barre de défilement :
http://lapetitefabricdebijoux.net/shop/

Code de la page html

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
 
<html>
 
<body>
 
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
 
<div id="ombre">
 
<div id="total">
 
blablablablablabla
 
blablablablablabla
 
blablablablablabla
 
</div>
 
</div>
 
</body>
 
</html>

Code la feuille de style CSS :

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
 
html, body{
 
	margin: 0;
 
	padding: 0;
 
	font-size:11px;
 
	font-family:Verdana,Arial,Helvetica,sans-serif;
 
	text-align:left;
 
	background-image: url('images/rayures.jpg');
 
	background-repeat:repeat-x;
 
}
 
 
 
div#ombre{background-image: url('images/background.jpg');background-repeat:no-repeat;min-height:750px;}
 
div#total{clear:both;background-color:#FFFFFF;color: #6d3b61;width:960px;margin-left:325px;}

Merci d'avance pour toute votre aide cligne

Bdorbo

**numew** · 13/04/2009, 10h20

pourquoi ne pas faire comme sur l'exemple qui fonctionne, avec une grande image de fond centrée sur le body de la page

Code :

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

1
2
3
 
background-image:url(../images/background.jpg);
background-position:center top;

**bdorbo** · 13/04/2009, 12h28

Tout d'abord merci pour ta réponse ;-).

Alors j'ai bien essayé ce que tu m'as dis ça fonctionne mais je n'arrive pas à "caler" le contenu div=total sans un margin-left de la largeur de l'image de gauche soit 325 px.

J'ai aussi supprimer le contenu de la div "ombre".

Merci pour ton aide et dis moi si tu vois autre chose.

Bdorbo

**numew** · 13/04/2009, 17h27

si je comprend bien ce que tu veut faire c'est centré le div total, peu importe la la largeur de la page. pour cela tu doit mettre margin-left, et margin-right en auto est laisser une largeur a ton div, ce qui est le cas.

Code :

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

1
2
3
4
 
margin-left:auto;
margin-right:auto;
width:960px;

**desert** · 13/04/2009, 18h08

Bonjour,
Pour adjuster le background de ton body avec son contenu, ce que tu peux faire, c'est :
- au lieu de donner l'id page_bg au body, le donner plutôt à un div qui englobe tout le contenu.
- ajouter la propriété min-width à ce div pour éviter le rétrécissement du background à partir d'une certaine largeur.
- jouer avec le padding du div#page_bg afin d'adjuster le background.

**bdorbo** · 13/04/2009, 19h22

Merci mille fois numew !!!!!

Tu es un chef ;-)

Tout fonctionne correctement !!!!!!!

Encore merci

@++

Mise en forme image de fond selon resolution

CSS

Discussions similaires

Partager

Partager