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 ?
     
  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
     
  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
     
  4. douniacreation
    douniacreation Nouveau WRInaute
    Inscrit:
    24 Janvier 2010
    Messages:
    38
    J'aime reçus:
    0
  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
     
  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 ?
     
  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...
     
  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.
     
  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
     
Chargement...
Similar Threads - CSS image background Forum Date
Alt sur un background-image css. Développement d'un site Web ou d'une appli mobile 5 Mars 2012
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
Image + texte cote à cote en CSS Développement d'un site Web ou d'une appli mobile 11 Décembre 2014
CSS : sélectionner les images flottantes Développement d'un site Web ou d'une appli mobile 15 Février 2013
Arborescence virtuelle, comment conserver les liens images, css, etc URL Rewriting et .htaccess 27 Novembre 2012
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice