Multiple backgrounds

[doggo18]

Hi,

Simply put, I am looking for a way in CSS to for example place one image fixed to the leftcenter of a div, and another image on the rightcenter of the same div. Is this possible without all kinds of hacks in the html? I've been looking for it but wasn't succesful in finding any..

Thanks

[doggo18]

In that case... anyone know a way to do this with hacks?
Quite a bummer, I thought CSS would support this on its own :'(

[Nightfire]

Only way is to have 2 divs with different backgrounds.

[Gabrielle]

From what I've learned on CF, you can have two fixed backgrounds on NS (?and mozilla?) but not on IE. On IE, you can only attach a fixed background to the body through css.

body {background-image: url(image.jpg);
            background-attachment: fixed;}

However, I'm having my own css background-nightmare at the moment, so my advice may not be worth its weight in bytes.

[shlagish]

maybe you could make another div and set it to the same width, height, position as the first and then put nothing in it (except for   so it shows....) and set a background.
You might need javascript to set the width, height, position if theses values vary...

[coder_seth]

why not just use two <div>s as somebody already suggested? the extra markup is minimal..

[Gabrielle]

Just reread my post, and for the sake of pedants (me), I'll amend my words:

you can only attach a fixed background to the body through css.

You can attach a fixed (non-scrolling) background only to the background.

Just reread your original post, and it seems you're asking for one div, with two sub-divisions with fixed images? Is there any reason you can't just have a larger image with "sub-picture1.jpg" on the left and "sub-picture2.jpg" on the right, divided by a blank space? You could then fix it within the div, or even on the body element of your stylesheet.

If I misread that, and only one of the images is fixed, then you could place the fixed image absolutely by attaching it to the body element (works in IE, remember?) and then place the scrollable image as an attachment to the relevant div.

If I'm barking up all the wrong trees, let me know and I'll rethink.

[Gabrielle]

...you can only attach a fixed background to the body through css... You can attach a fixed (non-scrolling) background only to the background

I'll get it right in a minute: You can attach a fixed (non-scrolling) background only to the body element in IE.

Retiring, hugely embarrassed, from roars of laughter...

[doggo18]

Sorry about my late reply

@ coderseth&nightfire:
Right now I have did it with an extra div which is containing the second image as you already suggested here. My problem with it is that for as far I know making an extra div just for layout is.. wrong.. So I prefer to do it without.. Well maybe CSS4

@ gabrielle:

Well what I am trying to do is to add a special effect to my div, kind of an inner shadow, with a part again the left border, and a part which always sticks to the bottom of the div. The length of the div is variable so one big pic with both shadows is no option.

@ all.. Sorry about my bad use of fixed. I just meant it should be stuck on the left of the div, not stuck at the same place of the viewport. My bad

[coder_seth]

about "wrong" markup, i think you have to remember too that CSS and HTML are tools and part of making a web page is designing it. if you're using valid markup and CSS, i don't see anything wrong with some extra markup here and there to achieve desired effects that current specs for CSS do not allow.

don't live and die by a purists mind set. the world does not operate on ideals, so it's okay to abandon them occasionally.

[Tails]

Check the coding at http://csszengarden.com. The bottom right background image is positioned there while the top left is a left is a left floated div with no margins containing a background. They're not fixed, but I hope it gives you some ideas.