CSS 2 image en background

**le Mer Oct 20, 2010 16:20**

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: Tout sélectionner: <body> <div id="all"> </div> </body>

pour le CSS

Code: Tout sélectionner: 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: Tout sélectionner: #all{ width:100%; background: url(../images/bkg-2.png) center repeat-y; }

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

Une idée SVP ?

**le Mer Oct 20, 2010 16:31**

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

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

visage = body
main = #all

**le Mer Oct 20, 2010 18:06**

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

**le Mer Oct 20, 2010 19:00**

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 écrit:Si tu met ta main sur ton visage on voit quoi? Ta main!

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

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 ?

**le Mer Oct 20, 2010 19:25**

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

**le Mer Oct 20, 2010 19:28**

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 ?

**le Mer Oct 20, 2010 20:07**

franckM a écrit: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...

**le Jeu Oct 21, 2010 11:55**

Il suffit d'inverser les deux images non ?

Code: Tout sélectionner: 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.

**le Ven Oct 22, 2010 19:11**

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

Merci pour votre collaboration

CSS 2 image en background

CSS 2 image en background

Re: CSS 2 image en background

Re: CSS 2 image en background

Re: CSS 2 image en background

Re: CSS 2 image en background

Re: CSS 2 image en background

Re: CSS 2 image en background

Re: CSS 2 image en background

Re: CSS 2 image en background

Lectures recommandées sur ce thème :

Qui est en ligne