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

Yumball · 08-11-2005, 09:05 AM

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 · 08-11-2005, 09:09 AM

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

mholt · 08-11-2005, 09:20 AM

Just combine the images into one using an image editor :-/

iNod · 08-11-2005, 09:23 AM

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 · 08-11-2005, 09:28 AM

combining the images is not an option

one image is on the left while the other is on the right

mholt · 08-11-2005, 09:37 AM

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 · 08-11-2005, 10:36 AM

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.

mholt · 08-11-2005, 10:39 AM

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 · 08-11-2005, 10:58 AM

Originally Posted by 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.

when will that be released?

Originally Posted by adam_uk

unless using loads of jiggery pokery with multiple divs and classess etc its not possible
????: NamePros.com http://www.namepros.com/programming/114707-css-having-multiple-fixed-background-positions.html

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

mholt · 08-11-2005, 11:41 AM

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

Yumball · 08-11-2005, 01:20 PM

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

mholt · 08-11-2005, 03:47 PM

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

Be sure that your div tag has this:
????: NamePros.com http://www.namepros.com/showthread.php?t=114707

<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 · 08-20-2005, 04:05 AM

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

08-11-2005, 09:05 AM	THREAD STARTER #1 (permalink)
Yumball New Member Join Date: Aug 2005 Posts: 18	CSS: having multiple fixed background positions in a body tag? 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 __________________ http://www.yumball.be Webdesign in Vlaanderen!

08-11-2005, 09:09 AM	#2 (permalink)
iNod Eating Pie Join Date: Nov 2004 Location: Canada Posts: 2,272	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 __________________ I feel old.

08-11-2005, 09:23 AM	#4 (permalink)
iNod Eating Pie Join Date: Nov 2004 Location: Canada Posts: 2,272	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. __________________ I feel old.

08-11-2005, 09:28 AM	THREAD STARTER #5 (permalink)
Yumball New Member Join Date: Aug 2005 Posts: 18	combining the images is not an option one image is on the left while the other is on the right __________________ http://www.yumball.be Webdesign in Vlaanderen!

08-11-2005, 01:20 PM	THREAD STARTER #11 (permalink)
Yumball New Member Join Date: Aug 2005 Posts: 18	Yes, someone else told me to use div aswell. I have tried it myself, but with no success __________________ http://www.yumball.be Webdesign in Vlaanderen!

08-11-2005, 09:20 AM	#3 (permalink)
mholt DNOA Member Join Date: May 2004 Posts: 5,040	Just combine the images into one using an image editor :-/

08-11-2005, 09:37 AM	#6 (permalink)
mholt DNOA Member Join Date: May 2004 Posts: 5,040	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.

08-11-2005, 10:36 AM	#7 (permalink)
adam_uk Senior Member Join Date: May 2003 Posts: 2,187	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.

08-11-2005, 10:39 AM	#8 (permalink)
mholt DNOA Member Join Date: May 2004 Posts: 5,040	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)

08-11-2005, 11:41 AM	#10 (permalink)
mholt DNOA Member Join Date: May 2004 Posts: 5,040	It's been done, like I said - use a <div> tag. It's possible... GRRR I can't find that site

08-11-2005, 03:47 PM	#12 (permalink)
mholt DNOA Member Join Date: May 2004 Posts: 5,040	http://www.echoecho.com/csslayers.htm and http://www.southerntwilight.com/tuto...csslayers.html may both be helpful. Be sure that your div tag has this: ????: NamePros.com http://www.namepros.com/showthread.php?t=114707 <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".

08-20-2005, 04:05 AM	#13 (permalink)
Zubair1 NamePros Regular Join Date: Mar 2005 Posts: 912	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 __________________ Live Support : Zubair11 [at] hotmail.com Free SEO Directory! \|\| Free Online TV \|\| Tech Blog Web Design & Web Development Services \|\| Reliable Web Hosting

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Fixed background image in IE	John_P	Programming	1	06-07-2005 08:52 PM
In dreamweaver, how do you make your Css Style have an image background	John_Smith198	Web Design Discussion	3	06-05-2005 06:04 AM
CSS Redefine body?	elixium	CODE	3	07-05-2004 02:42 AM
Fixed Backgrounds CSS IE/Moz	Spirited	Programming	3	06-08-2004 09:07 PM
pb with background (css)	virgile00	Graphic Design / Flash	1	11-06-2003 09:41 AM