CSS: Having multiple fixed background positions in a body tag?

[Yumball]

Hi, I want a background to stay as I scroll down and I currently have this:


body {
background-image: url(image.gif);
background-repeat: no-repeat;
background-attachment: fixed;

}



But how do I add multiple images in a body tag?

Thnx in advance

 

[iNod]

I am not quiet sure what you are getting to multiply images in the body tag?

But I think you mean how do I add multiply bg images.. Well so far there is no code for that so it is impossible to accomplish.. There may be a way using CSS.

iNod

 

[user-7256]

Just combine the images into one using an image editor

 

[iNod]

lol.. Or you can do that.. I was totally not thinking of that lol..

Anyways yes I just looked around I can't find anything css to do this.

 

[Yumball]

combining the images is not an option
one image is on the left while the other is on the right

 

[user-7256]

Use <div> tags! Make one a background image with no repeat, then make the other one a <div style="background-image: url('image.php');"> thing ... just make sure you somehow attach it to the corner and make it behind text. How exactly? I don't know.

www.pixel2life.com might have some tuts on how to do that.

 

[adam_uk]

unless using loads of jiggery pokery with multiple divs and classess etc its not possible

how ever in the next version of css you can use multiple css backgroumds.

 

[user-7256]

No, I've seen somebody do it before! It's possible! It was a firefox icon in the top-right corner of the screen that stayed there even when you scrolled... and it was clickable... can't remember the site though! (Yes, it was a background image too)

 

[Yumball]

unless using loads of jiggery pokery with multiple divs and classess etc its not possible

how ever in the next version of css you can use multiple css backgroumds.

when will that be released?

unless using loads of jiggery pokery with multiple divs and classess etc its not possible

how ever in the next version of css you can use multiple css backgroumds.

and do u happen to know how that jiggery looks like? i'm getting desperate here

 

[user-7256]

It's been done, like I said - use a <div> tag. It's possible... GRRR I can't find that site

 

[Yumball]

Yes, someone else told me to use div aswell. I have tried it myself, but with no success

 

[user-7256]

http://www.echoecho.com/csslayers.htm
and
http://www.southerntwilight.com/tutorials/csslayers.html
may both be helpful.

Be sure that your div tag has this:

<div class="bg"> (or whatever name for it)

Then your class:

.bg {
background-image: url('image.jpg');
z-index: 1;
position: relative;
top: 0px;
left: 100%;
}


Now, I'm not sure about the left: 100% thing, but you want to make sure that the REST of your site is in a <div> or <span> tag that has a z-index of 2 OR HIGHER! Otherwise that corner will be on TOP of the text instead of BELOW it!

Also, if it doesn't stay there when scrolling, try changing "relative" to "absolute".

 

[Zubair1]

you could use mutliple div tags or span but I don't they might be helpful
but I would like to agree with Yumball combining would be better else irragation
and it would also be easy if you wanted to edit it again