2 background-image dans une div

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par sff, 9 Juin 2010.

  1. sff
    sff WRInaute impliqué
    Inscrit:
    2 Février 2005
    Messages:
    525
    J'aime reçus:
    0
    Bonjour,

    J'ai tenté de mettre 2 background-image dans une div. J'ai bien les 2 images comme prévu dedans, sauf que la première respecte la no-repeat et le position center et ca je ne veux pas.

    Comment faire ?

    <div style="width:576px; height:448px; background-image:url(images/carte/back_map.png); background-image:url(images/carte/fonds/2.jpg); background-position:center; background-repeat:no-repeat"></div>

    Merci
     
  2. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 780
    J'aime reçus:
    240
    2 background en CSS, ce n'est surement pas encore fort supporté (CSS3 si j'me souviens bien).
    Et si tu veux les positionner indépendament, il faut passer le position center et le no-repeat directement par le raccourci "background".
    Dans ton exemple les 2 seront pris en compte.

    http://www.w3schools.com/css/css_background.asp => Background - Shorthand property
     
  3. Dharius
    Dharius WRInaute impliqué
    Inscrit:
    6 Avril 2005
    Messages:
    746
    J'aime reçus:
    0
    Salut,

    Je pense que ça marche pas du tout d'appliquer 2 fois le même "intitulé" de style dans certains navigateurs.
    le mieux est peux-être simplement d'imbriquer 2 div...
     
  4. NxtGen
    NxtGen WRInaute impliqué
    Inscrit:
    24 Octobre 2006
    Messages:
    566
    J'aime reçus:
    0
    Bonjour,

    Dharius a raison.
    Normalement en css, si il y a deux valeurs pour un même style, c'est la dernière qui est prise en compte.
    Par exemple si tu fais :

    Code:
    .text {
         color: red;
         color: blue;
         }
    ton texte sera bleu, et pas bleu et rouge :)
    Maintenant, peut être qu'en CSS3 ceci sera pris en compte, mais en tout cas pour l'instant, la plupart des navigateur ne prendront en compte que la deuxième valeur.

    Et pour ton problème de position du background, il faut faire :
    Code:
    background: url('images/carte/back_map.png') no-repeat 50% 50%;
    :)
     
  5. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 705
    J'aime reçus:
    0
  6. gg00xiv
    gg00xiv Nouveau WRInaute
    Inscrit:
    10 Juin 2010
    Messages:
    39
    J'aime reçus:
    0
    Cela va considérablement alléger le code CSS surtout pour ce qui est des "boites" à bords arrondis ;)
     
  7. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    8 780
    J'aime reçus:
    240
    Plus besoin d'images, les bords arrondis sont prévus en CSS3 avec border-radius.
     
  8. gg00xiv
    gg00xiv Nouveau WRInaute
    Inscrit:
    10 Juin 2010
    Messages:
    39
    J'aime reçus:
    0
    Oui, mais je pensais surtout (sans l'avoir écrit au temps pour moi) à des arrondis un peu design créés sous photoshop ou autre ^^
     
Chargement...
Similar Threads - background image div Forum Date
La background image du site et la vue en cache de google Débuter en référencement 26 Mars 2018
Background image sous conditions Développement d'un site Web ou d'une appli mobile 8 Avril 2013
Alt sur un background-image css. Développement d'un site Web ou d'une appli mobile 5 Mars 2012
Background-image qui ne s'affiche plus suite REDIR htaccess URL Rewriting et .htaccess 14 Décembre 2011
background-image ou img pour une image Développement d'un site Web ou d'une appli mobile 21 Octobre 2010
CSS 2 image en background Développement d'un site Web ou d'une appli mobile 20 Octobre 2010
Image en Background ... Développement d'un site Web ou d'une appli mobile 3 Octobre 2010
Newsletter html et background-image - prise de tête inside Développement d'un site Web ou d'une appli mobile 21 Septembre 2010
inserer une image dans le background de mon site Développement d'un site Web ou d'une appli mobile 30 Juin 2010
Images background sont elles référencées ? YouTube, Google Images et Google Maps 30 Avril 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice