Specifying images for top, bottom, left and right. How to do?

Question

I can specify CSS like this:

background: #CFCFCF url(button.bmp) repeat-x top;

but if I want an image for top along with images for left, right and bottom, how would I go about that?

Answer 1

The HTML

<div class="nice">... inner HTML goes here...</div>

The CSS

.nice {
  border: 1px solid #ffcf86;
  padding-left: 50px;
  padding-right: 50px;
  background: url(i5.gif) no-repeat 50% 50%;
}

.nice:before, .nice:after {
  display: block;
  height: 41px;
  margin-left: -50px;
  margin-right: -50px;
  font-size: 0;
}

.nice:before {
  content: url(i1.gif);
  background: url(i2.gif) no-repeat 100% 0;
}

.nice:after {
  content: url(i3.gif);
  background: url(i4.gif) no-repeat 100% 0;
}

result:

http: //dense13.com/blogExamples/multiple-background-images-with-css2/desiredResult.gif

Source http: //dense13.com/blog/2008/08/31/multiple-background-images-with-css2/

Old version:

It appears you can do something along the terms of (spaced the property values so that your get the effect):

#some_id {
    background-image:    url('image_url'), url('another_image_url');
    background-position: top left,         top right;
}

Source Quirksmode, This works in Safari only (and I got down-voted about it).

Answer 2

You would need to nest some elements to show one image each. As Wayne says, you can only specify one background image for an element (Until CSS3 is supported in more browsers).

<div id="top">
   <div id="container">
       Put your content here
   </div>
   <div id="right"></div>
   <div id="bottom"></div>
</div>

Then apply the CSS to each element

#top {background: url(top.jpg) no-repeat;}
#container {background: url(left.jpg) no-repeat;}
#right {background: url(right.jpg) no-repeat;}
#bottom {background: url(bottom.jpg) no-repeat;}

And you would also need to position the elements properly...