Superposition d'images en CSS - Possibilité de mettre 2 images dans le même élément?

Question

Supposons que je mette une image d'arrière-plan pour une page Web en CSS comme ceci:

body    {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0; 
background: url(images/desk.gif) repeat bottom left;
}

Existe-t-il un moyen de superposer une seconde image au-dessus de desk.gif dans l'élément body lui-même, ou constitue-t-il l'unique moyen de créer une classe séparée et d'utiliser l'axe z?

Désolé, c’est une question simple, mais j’essaie de comprendre cela et, bien que je n’aie pas réussi à la faire fonctionner, je n’ai pas non plus trouvé d’effets clairs sur cette idée, que ce soit en ligne ... oui, y at-il un moyen, ou est-ce juste un non peut faire?

Merci!

Answer 1

En bref, ce n'est pas possible. Vous pouvez le faire, mais vous devez ajouter un deuxième objet HTML à la page pour le faire fonctionner. Ainsi, par exemple, placez un bloc div juste en dessous de votre corps et attribuez le deuxième arrière-plan à cet objet.

J'espère que ça aide!

Answer 2

Les arrière-plans superposés font partie de la brouillon de travail CSS3 , mais Autant que je sache, leur support est limité aux navigateurs WebKit / KHTML tels que Safari, Chrome, Konqueror et OmniWeb.

En utilisant votre exemple de code, cela ressemblerait à:

body    {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #9D5922;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding: 0; 
    background: url("images/top.gif") left bottom repeat,
                url("images/desk.gif") left bottom repeat;
}

Answer 3

J'ai déjà posté la solution sous forme d'une question dupliquée, mais pour quiconque aurait besoin de cette information, je la posterai ici aussi.

Pour autant que je sache, il n’est pas possible de le placer dans le même calque, mais il est possible de placer plusieurs images dans des divs séparés, et a été mis en œuvre par le site Web de test d’utilisabilité populaire Silverback (vérifiez l'arrière-plan pour voir comment il a été mis en couches). Si vous parcourez le code source, vous constaterez que l’arrière-plan est composé de plusieurs images, superposées.

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

Answer 4

De nos jours, cela peut être fait dans tous les & "modernes &"; navigateurs (pas < IE9, autant que je sache). Je peux confirmer que cela fonctionne dans Firefox, Opera, Chrome. Il n'y a aucune raison de ne pas le faire, tant que vous disposez d'une solution de secours décente pour les anciens navigateurs / IE.

Pour la syntaxe, vous pouvez choisir entre

  background:url(..) repeat-x left top,
             url(..) repeat-x left bottom;

et

  background-image:url(..), url(..);
  background-position:left top, left bottom;
  background-repeat:repeat-x;

Vous n'avez pas besoin de sauts de ligne, mais la virgule est importante.

Attention! Les éléments suivants créeront deux arrière-plans, même si vous n'avez spécifié qu'une seule URL d'image:

  background-image:url(..);
  background-position:top, bottom;

Et bien sûr, il existe une alternative à l'utilisation de conteneurs imbriqués, mais cela va gonfler votre code HTML.

Answer 5

Le seul moyen consiste à utiliser un autre conteneur. Chaque élément ne peut contenir qu’une seule image de fond.

Answer 6

Utilisez le positionnement absolu et un index z pour placer le deuxième élément au premier plan.

Answer 7

texte du lien

Le lien mentionné ci-dessus décrit le mieux ce que vous devez ...

Answer 8

N'oubliez pas que vous pouvez appliquer des styles à l'élément HTML:

html {
background: url(images/whatever.gif);
}