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

316

Est-il possible d'avoir deux images d'arrière-plan? Par exemple, je voudrais avoir une répétition d'image en haut (répétition-x) et une autre répétition sur toute la page (répétition), où celle sur toute la page est derrière celle qui se répète en haut.

J'ai trouvé que je peux obtenir l'effet souhaité pour deux images d'arrière-plan en définissant l'arrière-plan de html et body:

html {
    background: url(images/bg.png);
}

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

Est-ce que c'est un "bon" CSS? Existe-t-il une meilleure méthode? Et si je voulais au moins trois images d'arrière-plan?

css background-image Rudd Zwolinski
la source

Réponses:

377

CSS3 permet ce genre de chose et cela 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 le prennent désormais en charge , mais si vous devez prendre en charge IE8 ou une version antérieure, la meilleure façon de le contourner 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;
}
nickf
la source
27
Plusieurs arrière-plans sont pris en charge par les dernières versions de Firefox, Chrome, Safari et Opera. Il sera également pris en charge dans IE9. en.wikipedia.org/wiki/…
Šime Vidas
4
Et si vous souhaitez avoir différents paramètres de répétition / position, vous pouvez le faire: css3.info/preview/multiple-backgrounds
Krisc
2
Pour IE8 - IE6, vous pouvez utiliser PIE.js. webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…
Aleš Kotnik
1
La taille d'arrière-plan suit-elle la même règle? Je veux que toutes mes images d'arrière-plan soient à pleine hauteur, sauf pour l'une d'entre elles (que je veux être la hauteur de l'image).
mtmurdock
Oui, la taille de l'arrière-plan suit la même règle (comme toutes les autres propriétés d'arrière-plan). Les propriétés d'arrière-plan (commençant généralement par le préfixe d'arrière-plan, puis une propriété spécifique de l'arrière-plan) peuvent en fait être spécifiées dans la propriété d'arrière-plan elle-même.Par conséquent, comme plusieurs images d'arrière-plan sont prises en charge, plusieurs propriétés répertoriées sont également prises en charge. Cela s'applique à la taille, la position, la répétition, etc.
Cannicide
35

La manière la plus simple que j'ai trouvée d'utiliser deux images d'arrière-plan différentes dans une div est avec cette ligne de code:

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

De toute évidence, cela ne doit pas être uniquement pour le corps du site Web, vous pouvez l'utiliser pour n'importe quelle div.

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

TheLibzter
la source
Notez que cela ne fonctionne qu'avec l'arrière-plan et non avec l'image d'arrière-plan
yoel halb
24

utilisez ceci 

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;
}

un moyen simple de régler chaque position de l'image avec background-position: et de définir la propriété repeat avec background-repeat: pour chaque image individuellement

code.rider
la source
13

La version actuelle de FF et IE et certains autres navigateurs prennent en charge plusieurs images d'arrière-plan 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 envisager d'ajouter un comportement. Regardez ici: http://css3pie.com/

Shannon
la source
4

Oui, cela est possible et a été mis en œuvre par le site Web de tests d'utilisation Silverback . Si vous regardez à travers 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 montrant comment faire pour que l'effet se retrouve sur la vitamine . Un concept similaire pour envelopper ces couches de "peau d'oignon" peut être trouvé sur A List Apart .

Mike B
la source
4

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>
rachel
la source
2 

#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>
Développer l'extrait

Nous pouvons facilement ajouter plusieurs images à l'aide de CSS3. nous pouvons lire en détail ici http://www.w3schools.com/css/css3_backgrounds.asp

Rinku
la source
1

Vous pouvez avoir un div pour le haut avec un arrière-plan et un autre pour la page principale, et séparer le contenu de la page entre eux ou placer le contenu dans un div flottant à un autre niveau z. La façon dont vous le faites peut fonctionner, mais je doute que cela fonctionne avec tous les navigateurs que vous rencontrez.

Sean James
la source