Est-ce que je peux avoir plusieurs images de fond à l’aide de CSS ?

Question

Est-il possible d'avoir deux images d'arrière-plan? Par exemple, j'aimerais avoir une image de répétition (repeat-x), et un autre se répètent sur toute la page (répéter), où l'un à travers l'ensemble de la page est derrière celui qui se répète à travers le haut.

J'ai trouvé que je peux obtenir l'effet désiré pour deux images de fond, réglage de l'arrière-plan de l'html et du corps:

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

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

Est-ce une "bonne" CSS? Est-il une meilleure méthode? Et que si je voulais trois ou plusieurs images d'arrière-plan?

Answer 1

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

Les versions actuelles de tous les principaux navigateurs maintenant soutiennent, cependant si vous avez besoin soutenir IE8 ou ci-dessous, puis la meilleure façon, vous pouvez contourner c’est d’avoir des divs supplémentaires :

Answer 2

La façon la plus simple que j'ai trouvé pour utiliser deux images d'arrière-plan dans un div est avec cette ligne de code:

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

Évidemment, qui n'a pas à être pour que le corps du site, vous pouvez l'utiliser pour n'importe quel div que vous voulez.

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

Answer 3

Utilisez cette

un moyen simple de vous ajuster la position de chaque image avec background-position : et affectez la propriété répéter avec background-repeat : pour chaque image individuellement

Merci !

Answer 4

Version actuelle de FF et IE et les autres navigateurs en charge plusieurs images d'arrière-plan dans un seul CSS2 déclaration. 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/

Answer 5

Oui, il est possible, et a été mis en œuvre par les tests d'utilisabilité du site web à dos Argenté. Si vous regardez dans le code source, vous pouvez voir que le fond est composé de plusieurs images, placé sur le dessus les uns des autres.

Voici l'article qui montre comment faire l'effet peut être trouvé sur la Vitamine. Un concept similaire pour l'emballage de ces "peau d'oignon" couches peut être trouvé sur Une Liste à Part.