Image de fond se met sous le wrapper

debutecss -  
 debutecss -
Bonjour,

Je suis confronté au probleme de mettre une image de fond a mon site web, au début javais mis une couleur de fond et ça fonctionnait tres bien mais là je voudrai changer et mettre une image de fond mais le probleme c'est que l image de fond se met sous le wrapper

mon image est juste une couleur de fond auquel jai ajouté un texte qui va servir d'entete

pourtant jai bien mis le code sous body

mon code htlm

<body>
<div id=wrapper>
</div>
</body>

mon code css wrapper

#wrapper {
max-width: 940px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
border: 3px solid #888;
background: #fff;
/* curved border radius */
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }

Je vous remercie de m'aider , je ne trouve plus de solution

A voir également:

8 réponses

Réponse 1 / 8
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Bonjour !

Tu veux mettre l'image de fond au-dessus de wrapper ? Si tu veux, tu peux enlever la couleur et tu met un transparent dans ton wrapper et on verra ton image de fond : 

#wrapper {
max-width: 940px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgba(0, 0, 255, 0); 
}


Voilà ! :)
lerendra

0
Réponse 2 / 8
debutecss
 
non au contraire je voudrai que mon image de fond soit sous le wrapper comme sur ce site on voit bien qu il y a une couleur de fond qui est bleu clair, et sur mon site au lieu de mettre couleur de fond je voudrais mettre image de fond, cela fonctionne pour la couleur de fond mais pas pour l image de fond, jai l impression que l image de fond se met sous mon wrapper
0
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Ah bah tu as juste à rajouter dans le code CSS: 
body {
Background: url("lien_de_ton_image");
}

Ton image de fond sera en dessous de wrapper.

Tiens moi au courant ! ;)
Lerendra
0
Réponse 3 / 8
debutecss
 
oui tout le problème est là , cela ne fonctionne pas!!!

ça me rend dingue
0
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Montre ton code en entier, enfin surtout le css.
0
Réponse 4 / 8
debutecss
  
/* reset */
* {
margin: 0;
padding: 0;
}


/* render html5 elements as block */
header, footer, section, aside, nav, article, {
display: block;
}


body
{
background-image: url("image/image_de_fond.jpg");

}
#wrapper {
max-width: 940px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
border: 3px solid #888;
background: #fff;
/* curved border radius */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}



nav {
position: relative;
width: 940px;
height: 60px;
margin: 0 auto;
background-color: #52A033;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(#5E9E20), color-stop(0.5, #32871A), to(#52A033));
background: -moz-radial-gradient(50% 50%, farthest-side, #5E9E20, #32871A, #52A033);
margin-top: -15px;
box-shadow: 6px 6px 6px white; 
border-radius: 5px;

}



nav .menu ul {
margin: 0;
padding: 17px 20px;
list-style: none;
line-height: normal;
}

nav .menu li  a{
display: block;
float: right;

}



nav .menu a {
display: block;
float: left;
margin-right: 5px;
padding: 0 10px;
text-decoration: none;
color: #F2E0DF;
}

nav .menu a:hover {
text-decoration: underline;
}


#principal {
width: 940px;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 30px;
background-color: #E1FCC3;
background: -webkit-gradient(linear, left center, right center, from(#C9FADA), to(#E1FCC3), color-stop(.5,#B1F9B9));
background: -moz-linear-gradient(left, #C9FADA 0%, #B1F9B9 50%, #E1FCC3 100%);
overflow: hidden;
margin-top: 15px;
margin-bottom:10px;
border-radius: 5px;
box-shadow: 6px 6px 6px white;

}
0
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Je vais regarder une fois chez moi, dans une heure. Mais vérifie bien le lien de ton image. Essaye de mettre une image directement à partir d'un site et dit moi si sa marche.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
debutecss
 
d'accord merci pour ton aide
0
Réponse 6 / 8
debutecss
 
cela ne fonctionne pas avec d'autres images, je viens d'essayer

ça colle tout sous le wrapper qui est centré au milieu et faisant 940px car je vois qu il y a en plus des bordure en plus en téléchargeant l image de fond

pourtant pour mettre une couleur de fond cela fonctionne , mais pas l image
0
Réponse 7 / 8
debutecss
 
ça fonctionne maintenant mais je ne pourrai dire comment

en effet, ce que jai fait c'est creer une nouvelle page ça a bien sur fonctionner puis jai rééessayé sur ma page premiere pareil ça a fonctionné

je ne comprends pas dou venait le probleme, maintenant je dois faire no-repeat et ça fonctionne pas

lol je sens je vais rester coincer longtemps devant le pc
0
Lerendra Messages postés 412 Date d'inscription   Statut Membre Dernière intervention   299
 
Tu as mis sa ? : 
 body
{
background-image: url("image/image_de_fond.jpg");
background-repeat: no-repeat;
}
0
Réponse 8 / 8
debutecss
 
oui j'ai essayé cela mais j'ai pu voir en faisant des recherches qu une image ne s'etend pas su tout l ecran avec le code background il faut lui donner une valeur img dans html

c'est ce que jai fait en suivant les consignes ici http://www.alsacreations.com/astuce/lire/50-comment-faire-un-arrire-plan-tirable.html

le probleme c'est que l image se postionne bien dans tout l ecran mais le contenu de mon site il se positionne sous l image

mon code en gros c'est 

<body>
	
		<div id="arriere">
				
				<img id="arriere" alt="" src="images/image_de_fond.jpg"/>
	
		<div id="wrapper
</div>
</div>
</body>
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
probleme sommet
urgent -
Raymond PENTIER -

2 réponses
Retrouver l'image originale après avoir fait des modifications ?
Raven -
Asta972155 -

10 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse