Image de fond se met sous le wrapper

Fermé
debutecss - Modifié par debutecss le 24/08/2014 à 15:51
 debutecss - 24 août 2014 à 19:03
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

Lerendra Messages postés 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
24 août 2014 à 16:00
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
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 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
24 août 2014 à 16:27
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
oui tout le problème est là , cela ne fonctionne pas!!!

ça me rend dingue
0
Lerendra Messages postés 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
24 août 2014 à 16:47
Montre ton code en entier, enfin surtout le css.
0
/* 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 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
24 août 2014 à 16:59
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
d'accord merci pour ton aide
0
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
ç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 408 Date d'inscription jeudi 26 septembre 2013 Statut Membre Dernière intervention 28 mai 2018 299
24 août 2014 à 18:40
Tu as mis sa ? :
 body
{
background-image: url("image/image_de_fond.jpg");
background-repeat: no-repeat;
}
0
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