CSS 2 image en background

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par douniacreation, 20 Octobre 2010.

  1. douniacreation
    douniacreation Nouveau WRInaute
    Inscrit:
    24 Janvier 2010
    Messages:
    38
    J'aime reçus:
    0
    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 ?
     
    #1 douniacreation, 20 Octobre 2010
  2. boby55
    boby55 WRInaute occasionnel
    Inscrit:
    2 Avril 2008
    Messages:
    359
    J'aime reçus:
    0
    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
     
    #2 boby55, 20 Octobre 2010
  3. 212communication
    212communication WRInaute discret
    Inscrit:
    18 Novembre 2009
    Messages:
    118
    J'aime reçus:
    0
    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
     
    #3 212communication, 20 Octobre 2010
  4. douniacreation
    douniacreation Nouveau WRInaute
    Inscrit:
    24 Janvier 2010
    Messages:
    38
    J'aime reçus:
    0
    #4 douniacreation, 20 Octobre 2010
  5. 212communication
    212communication WRInaute discret
    Inscrit:
    18 Novembre 2009
    Messages:
    118
    J'aime reçus:
    0
    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
     
    #5 212communication, 20 Octobre 2010
  6. franckM
    franckM WRInaute impliqué
    Inscrit:
    15 Novembre 2007
    Messages:
    808
    J'aime reçus:
    0
    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 ?
     
    #6 franckM, 20 Octobre 2010
  7. douniacreation
    douniacreation Nouveau WRInaute
    Inscrit:
    24 Janvier 2010
    Messages:
    38
    J'aime reçus:
    0
    Justement, il y a un ombre noir sur les cotés du blanc...
     
    #7 douniacreation, 20 Octobre 2010
  8. CARREZ
    CARREZ WRInaute discret
    Inscrit:
    12 Mai 2006
    Messages:
    73
    J'aime reçus:
    0
    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.
     
    #8 CARREZ, 21 Octobre 2010
  9. douniacreation
    douniacreation Nouveau WRInaute
    Inscrit:
    24 Janvier 2010
    Messages:
    38
    J'aime reçus:
    0
    En fin de compté j'ai opté pour une couleur uni en arrière plan...

    Merci pour votre collaboration
     
    #9 douniacreation, 22 Octobre 2010
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - CSS image background Forum Date
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
Alt sur un background-image css. Développement d'un site Web ou d'une appli mobile 5 Mars 2012
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
CSS - Affichage de plusieurs images au passage de la souris Développement d'un site Web ou d'une appli mobile 19 Novembre 2017
Help CSS image par dessus texte Développement d'un site Web ou d'une appli mobile 7 Avril 2017
Image en CSS ou en HTML Débuter en référencement 19 Septembre 2015
image chargée en css Développement d'un site Web ou d'une appli mobile 8 Août 2015
Dégradé sur une image en CSS Développement d'un site Web ou d'une appli mobile 26 Mars 2015
Combine images using CSS sprites sur un site Joomla Débuter en référencement 18 Mars 2015