Puis-je avoir plusieurs images d'arrière-plan en utilisant CSS?

est-il possible d'avoir deux images de fond? Par exemple, j'aimerais qu'une image soit répétée à travers le haut (repeat-x), et une autre à travers toute la page (repeat), où l'image à travers toute la page se trouve derrière celle qui se répète à travers le haut.

j'ai trouvé que je peux atteindre l'effet désiré pour deux images d'arrière-plan en réglant l'arrière-plan de html et le corps: 

css prettyprint-override">html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

est-ce que c'est "bon" CSS? Est-il une meilleure méthode? Et si je voulais trois images de fond ou plus?

306
demandé sur Brock Adams 2009-01-08 06:37:17

8 réponses

CSS3 permet ce genre de chose et il ressemble à ceci: 

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

les versions actuelles de tous les principaux navigateurs soutiennent maintenant , cependant si vous avez besoin de soutenir IE8 ou moins, alors la meilleure façon que vous pouvez travailler autour de lui est d'avoir des divs supplémentaires: 

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}
372
répondu nickf 2012-12-14 06:34:24

la façon la plus facile que j'ai trouvée pour utiliser deux images de fond différentes dans un div est avec cette ligne de code: 

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

évidemment, cela ne doit pas être seulement pour le corps du site, vous pouvez utiliser cela pour n'importe quel div que vous voulez.

Espère que ça aide! Il y a un billet sur mon blog qui en parle un peu plus en profondeur si quelqu'un a besoin d'instructions ou d'aide - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div .

32
répondu TheLibzter 2013-03-02 23:14:58

utiliser cette 

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

une façon simple de vous ajuster chaque position de l'image avec l'arrière-plan-position: et de définir la propriété repeat avec l'arrière-plan-repeat: pour chaque image individuellement

22
répondu code.rider 2015-06-21 01:53:28

version courante de FF et IE et certains autres navigateurs prennent en charge plusieurs images de fond dans une seule déclaration CSS2. Regardez ici http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2 / et ici http://www.quirksmode.org/css/multiple_backgrounds.html et ici http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2 /

pour IE, vous pourriez considérer ajouter un comportement. Regardez ici: http://css3pie.com /

13
répondu Shannon 2010-10-30 23:14:39

Oui, c'est possible, et a été mis en œuvre par les tests d'utilisabilité du site web dos Argenté . Si vous regardez le code source, vous pouvez voir que l'arrière-plan est composé de plusieurs images, placées les unes sur les autres.

Voici l'article qui montre comment faire l'effet peut être trouvé sur Vitamine . Un concept similaire pour envelopper ces couches "peau d'oignon" peut être trouvé sur une liste à part .

4
répondu Mike B 2009-01-08 03:51:09

si vous voulez plusieurs images d'arrière-plan mais ne voulez pas qu'elles se chevauchent, vous pouvez utiliser ce CSS: 

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

avec cette structure HTML: 

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>
4
répondu rachel 2011-12-08 22:14:26 

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

nous pouvons facilement ajouter plusieurs images en utilisant CSS3. nous pouvons lire en détail ici http://www.w3schools.com/css/css3_backgrounds.asp

2
répondu Rinku 2016-04-06 18:05:05

vous pourriez avoir un div pour le dessus avec un fond et un autre pour la page principale, et séparer le contenu de la page entre eux ou mettre le contenu dans un div flottant sur un autre z-niveau. La façon dont vous le faites peut fonctionner, mais je doute qu'il va travailler à travers chaque navigateur que vous rencontrez.

1
répondu Sean James 2009-01-08 03:44:13