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

StackOverflow https://stackoverflow.com/questions/423172

  •  05-07-2019
  •  | 
  •  

Question

Est-il possible d'avoir deux images de fond? Par exemple, j'aimerais une image répétée en haut (repeat-x) et une autre répétition sur toute la page (répétition), celle sur toute la page étant 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 du code HTML et du corps: 

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

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

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

Était-ce utile?

La solution

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 en avez besoin supportez 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;
}

Autres conseils

Le moyen le plus simple que j'ai trouvé d'utiliser deux images d'arrière-plan différentes dans une même division consiste à 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 souhaitez.

J'espère que ça aide! 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-for-one-div .

utiliser 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

Les versions actuelles de FF et IE, ainsi que d’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 / images multiples avec arrière-plan-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/

Oui, cela est possible et a été implémenté par le site Web de tests de convivialité populaire Silverback . Si vous parcourez le code source, vous constaterez que l’arrière-plan est composé de plusieurs images superposées.

Voici l'article qui explique comment effectuer cet effet. Vous pouvez le trouver sur Vitamine . Un concept similaire pour l’enveloppement de ces couches de «pelure d’oignon» se trouve dans Une liste à part .

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>


#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 à l'aide de CSS3. nous pouvons lire en détail ici http://www.w3schools.com/css/css3_backgrounds.asp

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 situé 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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top