CODEWITHSUNDEEP
css
Somebody
Somebody

Reputation: 9645

CSS: Z-index of multiple backgrounds

I want to create border via multiple backgrounds and have spotted one problem. I need to apply priorities to each background, because many of them overlap each other.

Is there any css property to set z-index each background?

left-top-corner(z-index:2) top(repeat-x) right-top-corner(z-index:2)
left(repeat-y)
left-bottom-corner(z-index:2) bottom(repeat-x) right-bottom-corner(z-index:2)

like that.

Something like:

background-z-index:2,1,2 .. etc.

Upvotes: 8

Views: 9253

Answers (3)

Amogus666
Amogus666

Reputation: 9

I found this useful, but I believe there is a way to layer images on top of each other while also using z-index for elements like the border of a box. This is what you do for images:

body {
    background-image: url("paperbackground.jpg"), url("design1.jpg"), url("northpole2.jpg"), url("chessbackground.jpg"), url("clipart3102234.png"), url("grassblock.jpg"), url("photoborder.jpg");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-size: 650px 200px, 700px 290px, 700px 290px, 250px 250px, 200px 200px, 250px 250px, 835px 365px;
    background-position-x: 50%, 0%, 100%, 0%, 98%, 100%, 50%, 50%;
    background-position-y: 30%, 0%, 0%, 24%, 24%, 24%, 24%, 24%;
    background-color: rgb(170, 154, 154);
}

Upvotes: 0

BBagi
BBagi

Reputation: 2085

There is no z-index of background images. z-index only applies to individual elements, not properties of those elements.

Upvotes: 1

steveax
steveax

Reputation: 17753

No z-index, but there is a stacking order. It's kinda counter intuitive, but the first image you specify will be on top (and subsequent images will be below that) in the stacking order (opposite of HTML elements). More info here:

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

Upvotes: 13

Related Questions