CSS3 Rounded Corners Demo

One Division with Multiple Background Images

Description:

CSS3 is not fully supported in modern browsers. If your browser supports CSS3, you should see a beveled border around this entire page and a mouse in the lower right screen.

CHANGE STYLE SHEET:  CSS3  |  CSS2 | Alternate Version

Supported Browsers as of June 2008:

Method:

3 Image Slices

from a Photoshop™ comp

CSS3-BG image

 

top top

 

bottom bottom

 

middle middle

 

CSS3 Code

#wrapper {
text-align:center;
height:100%;
margin:auto;
width: 1025px;/*image width minus padding if used*/
background: url(bottom.jpg) bottom right no-repeat, url(top.jpg) top left no-repeat, url(middle.jpg) left repeat-y #FBFBFB;}
/* NOTE: Stacking order matters. Topmost definitions have priority over bottommost. If an image is not visible, try moving it higher up the list. A similar background color was added last.*/

 

Html Code

<div id="wrapper">
<p>Some text goes here.</p>
<p>Some more text goes here.</p>
</div>

Related Links: