web-dev-qa-db-fra.com

Puis-je avoir plusieurs images de fond en utilisant CSS?

Est-il possible d'avoir deux images de fond? Par exemple, j'aimerais qu'une image répète en haut (repeat-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 constaté que je pouvais obtenir l'effet souhaité pour deux images d'arrière-plan en définissant l'arrière-plan de HTML et de corps:

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

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

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

cssbackground-image
313
Rudd Zwolinski

CSS3 permet ce genre de chose et ça ressemble à ça:

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 supportent maintenant . Cependant, si vous avez besoin de supporter IE8 ou une version antérieure, le meilleur moyen de contourner ce problème 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;
}
377
nickf

Le moyen le plus simple que j'ai trouvé d'utiliser deux images d'arrière-plan différentes dans une même division est d'utiliser cette ligne de code:

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

Évidemment, cela ne doit pas nécessairement concerner uniquement le corps du site Web, vous pouvez l'utiliser pour toutes les div que vous voulez.

J'espère que ça t'as aidé! Il y a un article sur mon blog qui parle de cela un peu plus en profondeur si quelqu'un a besoin d'instructions supplémentaires ou d'aide - http://blog.thelibzter.com/css-tricks-use-two-background-images- pour-un-div .

34
TheLibzter

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 d'image avec background-position: et de définir la propriété de répétition avec background-repeat: pour chaque image individuellement

24
code.rider

La version actuelle de FF et IE ainsi que 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 pouvez envisager d'ajouter un comportement. Regardez ici: http://css3pie.com/

13
Shannon

Oui, cela est possible et a été mis en œuvre par le site Web de test de convivialité populaire Silverback . Si vous examinez le code source, vous constaterez que l’arrière-plan est composé de plusieurs images, superposées.

Voici l'article expliquant comment faire l'effet que l'on peut trouver sur Vitamin . Un concept similaire pour l’enveloppement de ces couches de "peau d’oignon" peut être trouvé sur A List Apart .

4
Mike B

Si vous voulez plusieurs images d'arrière-plan mais que vous 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
rachel
#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
Rinku

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 sur un autre niveau z. La façon dont vous le faites peut fonctionner, mais je doute que cela fonctionne sur tous les navigateurs rencontrés.

1
Sean James