div with 3 backgrounds

Question

Possible Duplicate:
Can I have multiple background images using CSS?

Is it possible to use 3 different background images in a div? Imagine a div where the far left is one image (that does not repeat), the middle is another image that repeats horizontally, and the far right is yet another image that does not repeat. (In much the same way as the header/content/footer model works vertically.)

If it's not possible please show me alternative ways - every way I have tried thus far has failed.

enter image description here

I do not understand. Can you show a screenshot or some sample code? — Pekka, Dec 15 '11 at 16:16

Fredy31 · Answer 1 · 2011-12-15T16:20:35.533

3

With CSS3, it is possible.

http://www.css3.info/preview/multiple-backgrounds/

Thing is, People with IE7 and IE8 wont see it... But those with the lastest versions of chrome, firefox, safari, opera, and I think IE9 will be able to see it.

So what is your public?

See this chart: http://caniuse.com/#search=multiple%20backgrounds

edited Dec 15 '11 at 16:20

answered Dec 15 '11 at 16:18

Fredy31

2,660
6
29
54

This dont work in IE 7 i need it to work in explorer too...please see my image above – Sveta26 Dec 15 '11 at 16:27
just tried that code with divs and that dont work:( – Sveta26 Dec 15 '11 at 16:30
In what browser? And what did you try? – Fredy31 Dec 15 '11 at 16:32
background: url(/Admin/Style/1.jpg) left top repeat, url(/Admin/Style/2.jpg) right bottom repeat, url(/Admin/Style/3.jpg) left top repeat; HOW can i make the left and the right parts be exactly width=30px ? – Sveta26 Dec 15 '11 at 18:01

score 0 · Accepted Answer · answered Dec 15 '11 at 16:43

0

You could actually do this without adding too much extra markup (if any) using the sliding doors technique. This technique is compatible in all browsers.

HTML:

<div class="outer">
    <div class="inner">
        ...
    </div>
</div>

CSS:

.outer { /* Apply "left door" styles here */ }
.inner { /* Apply "right door" styles here */ }

Let me know if you have any questions/problems with this.

answered Dec 15 '11 at 16:43

Wex

15,539
10
64
107

and what to do with the middle? there are 3 parts left , middle , right – Sveta26 Dec 15 '11 at 16:53
what about float? my needs to float left - how i mke the left and the right part to be attached to that div? – Sveta26 Dec 15 '11 at 16:55
You should be able to float your `.outer` div without breaking what you're doing. – Wex Dec 29 '11 at 21:19

div with 3 backgrounds

2 Answers2