Is it possible to set 3 backgrounds in one DIV ?

Question

Hi,

i want to do a rounded corners DIV ( only top left and right rounded corners ) and i want to set 3 backgrounds in one DIV by playing with background position.

i have 3 images :

1) leftcorner.png

2) rightcorner.png

3) internalfill.png

Is that possible ? if not how i can do it using multiple divs ?

Thanks

Answer 1

You can't do this in CSS2 (which is the most widely adopted standard). CSS3 makes this available, but it's currently only understood by more advanced browsers, thus fewer of your viewers.

Typically you'd have other elements in your DIV, like, say, an <h2> and a <p>:

<div>
    <h2>Title</h2>
    <p>Text</p>
</div>

Your CSS would have the image with the two top corners as the background of the DIV, the H2 and P would have the same background color and full-width. The P would have a background-image of the two bottom corners, or something similar.

Answer 2

You cannot set multiple backgrounds with current CSS support. An upcoming standard will enable you to set 9 images for full border customization. Currently you will have to use nested, overlapping DIVs like this:

<div>
    <div>
        <div>
        </div>
    </div>
</div>

Answer 3

Classic article on the topic: http://www.alistapart.com/articles/slidingdoors/

Answer 4

The nicest (pure CSS) solution I know would be to use the CSS effect added to http://jqueryui.com/demos/effect/default.html, which basically just uses the moz and webkit rounded corners attributes. To style just 2 corners you'd just edit the CSS so only the 2 corners you're interested in are changed. This won't round the corners in IE though, but it depends on what you're aim is. Whether you want to use JS to accomplish it or just stick to CSS.

See http://www.schillmania.com/projects/dialog2/ for a JS way of doing it in all browsers.

Answer 5

As Alex said, its not really possible with current CSS2 supporting browsers. But with HTML you can do it like this:

<div class='my-panel'>
    <div class='top-left-corner'/>
    <div class='top-right-corner'/>
</div>

Then with CSS you would apply your images like so:

.my-panel {
    background: transparent url('internalfill.png');
    position: relative;
}
.my-panel .top-left-corner {
    background: transparent url('top-left.png') no-repeat;
    position: absolute;
    top: 0;
    left: 0;   
    width: 20px;
    height: 20px;
}
.my-panel .top-right-corner {
    background: transparent url('top-right.png') no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
}

This is obviously a bit verbose, and could be optimised a little with additional CSS classes allowing you to reuse the width/height properties. There are also a variety of other methods for achieving this behaviour, but this is the one I find the simplest without using modern browser features.

Answer 6

Currently, it isn't possible to set multiple backgrounds. However, the best was to do this is to nest 3 divs.

<div id="fill_bg">
 <div id="left_corner_bg">
  <div id="right_corner_bg">
   Other stuff here...
  </div>
 </div>
</div>

In your CSS make sure that left_corner_bg isn't repeating and that right_corner_bg isn't repeating and is positioned on the right side.