Question: multipel background images simultaneously

Olivia Wood

II want to put multiple background images on my page, in the way that image 1 is tiled, image 2 is justified on the left and repeated vertically, image 3 is on the right, etc. Is there a way to do this without using layers?

Because I'm fed up with layers. They were unwieldy enough as it was when they were actually working, but just recently they all spontaneously self-destructed on me, and I have no idea why - actually, no, make that all but one spontaneously self-destructing, which is doubly infuriating because the one that's working isn't coded any different from the ones that aren't. Evil or Very Mad

My best guess is that it's some sort of glitch in my copy of Dreamweaver - it keeps on telling me some unspecified files have been modified outside of dreamweaver (which is so not possible) and would I like to resave such and such? It makes me want to evascerate something with a spork. Twisted Evil

An extra-dull, plastic spork.

But back to the multiple background images. Please help?

DoctorBeaver

I'm not 100% certain what you mean. Do you want a main image with full-length picture borders left & right?

Olivia Wood

riv

I'm not sure what you mean by layers... Did you mean the z-index thing?

Anyways, I would suggest encasing everything in 3 div's, and use CSS to put the background image in.

HTML code

DoctorBeaver

I'd just do it by defining a fullsize div (100% or however many pix or em)& the 2 side divs (whatever width you require). Enclose the sides divs within the fullsize div & use float: left & float:right; accordingly (with appropriate margins so the middle content doesn't run up to the sides). That way you'll get the background of the enclosing div showing between the 2 outer 1s.

Ranfaroth

Multiple background images are part of the CSS3 spec, and is currently only supported by Safari.
So nowdays, you'll have to use workarounds like the one posted by riv.

DoctorBeaver

I don't see that riv's workaround would do it. As I understand it, the 2 inner divs are required at the left & right sides. Riv's example would position div2 on the lefthand side of div 1 ok. But div 3 would be immediately to the right of it, not on the righthand side of div 1. You'd need to add float: left; to div 2 and float: right; to div 3 - which is what I suggested in the 1st place.

Ranfaroth

The workaround I was talking about is the nesting of divs

Aredon

Gotta use multiple layers, no other choice.

a_dubDesign

I'm not sure if we are on the same page of what your thinking of. If you can find an example that would be great for me.

What I'm picturing is a website with its content centered and one background style behind it, on the left side a different style and the right side another different style, but everything goes full length of the page.

If thats the page you are on theres a fairly simple way to do it, providing you keep your content at a static width. Make a sickly wide image which will be the background, I suggest 1680 or wider, but thats because my monitor is 1680 wide and it drives me nuts when backgrounds that shouldn't repeat-x do and it looks like crap or they just stop into dead space. Anway with your sickly wide image design your repeating background. Just make sure the background for the content is dead centered and the width you want it to be. Slice it so it will properly repeat on Y.

In HTML keep all of your content in 1 div, named content for the sake of the example. In CSS apply you super wide background to the body tag with a background position of center and repeat-y. Then center the content div, i usually set its left position to 50% and then set its left margin to the negative value of half its width. So if my content div is 600px wide its left margin would be -300px. Don't forget it set the content div's width.

Hope that helped, I'll go see if I can find a quick example of this for ya.
Ok heres one example, although the left and right sides are the same, I'm sure you can see how you could tweak the image to make it work

Dark-Tech

now im confused

see i think i have a similar question to this persons what i want to do is to have one image on the left, and a different one on the right

and overlapping part of both of those images i want an iframe in the center

can someone tell me how to do that

2 Background images, picture borders, transpaernt backgounds
Background Images
CSS Question Aid Please
background images in CSS
Best method of rollover images?

how to change the background pic for my floder???
Strange problem! Background pictures doesn't show!
Okay, I'm done trying to use CSS for layout.
New design of the home page
What do you use to make your page layout?

How about some feedback on site.
Webpage Design Programs
*OFFICIAL* Which Browser do you use?
Check My site Out
Phoenix free PHP scripts