CSS 2 image en background

douniacreation · 20 Octobre 2010

Bonjour,

Je veux mettre une image en arrière plan du site, avec un fond ( image ) qui se répète verticalement, pour cela j'ai fais :

Code:

<body>

<div id="all">
</div>

</body>

pour le CSS

Code:

body {
        background: url(../images/bkg.png) center top no-repeat;
	margin: 0;
	text-align: center;
}
#all{
width:100%;
float:left;
background: url(../images/bkg-2.png) center repeat-y;
}

Mais cela m'affiche que le bkg-2.png, comme si l'image du body est caché.

ALors si je change mon CSS et j'enleve le float:left du #all

Code:

#all{
width:100%;
background: url(../images/bkg-2.png) center repeat-y;
}

Cela m'affiche que le bkg.png...

Une idée SVP ?

boby55 · 20 Octobre 2010

Si tu met ta main sur ton visage on voit quoi? Ta main!

Enlève donc ta main si tu veux voir ton visage ! 8O

visage = body
main = #all

212communication · 20 Octobre 2010

le bg du #all doit être transparent pour que le bg du body apparait, si nn tu px nous laisser une capture d'écran de ta page

douniacreation · 20 Octobre 2010

Lien 1 : image du BKG body http://www.casimages.com/img.php?i=101020075335530159.jpg

Lien 2 : image bu BKG #all http://www.casimages.com/img.php?i=10102007561292858.jpg

boby55 a dit:
Si tu met ta main sur ton visage on voit quoi? Ta main!

Enlève donc ta main si tu veux voir ton visage ! 8O

visage = body
main = #all

Si je veux voir la bouche et le nez du visage ( body ) puis je met mettre ma main sur mon front ( #all ) je pense que c'est faisable ?

212communication · 20 Octobre 2010

je trouve l'image du #all très bonne en arrière plan
tu doit juste ajouter un backgroundcolor en cas d'une page longue

franckM · 20 Octobre 2010

Pourquoi ne pas mettre plutôt ton image 2 dans le body et rajouter à ce même body une couleur de fond unie ?

Ainsi:
1. Ton image de fond (celle du all) apparaît en premier plan
2. Une fois terminée, c'est le fond bleu uni qui prend le relais

Je dis ça car en fait ton image du body est un fond bleu uni non ?

douniacreation · 20 Octobre 2010

franckM a dit:
Je dis ça car en fait ton image du body est un fond bleu uni non ?

Justement, il y a un ombre noir sur les cotés du blanc...

CARREZ · 21 Octobre 2010

Il suffit d'inverser les deux images non ?

Code:

body {
        background: url(../images/bkg-2.png) center top repeat-y;
   margin: 0;
   text-align: center;
}
#all{
width:100%;
float:left;
background: url(../images/bkg.png) center no-repeat;
}

Ca reviens à ce que dit frankM ... Pour aller dans ce sens (et redire ce qui est dis d'ailleurs !), c'est plus simple de faire une image transparente de l'ombre qui se répète verticalement et ajouter une couleur de fond au body, ça évite d'avoir une image très large en fond.

Il faut que l'image répétée verticalement soit derrière l'image non répétée, donc dans le body.

douniacreation · 22 Octobre 2010

En fin de compté j'ai opté pour une couleur uni en arrière plan...

Merci pour votre collaboration