Alt-Web Design & Publishing
CSS3 Demo - One Division with Multiple Background Images

Description:

CSS3 is not fully supported in all modern browsers yet. But 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 March 2010:

Method:

3 Image Slices

from a Photoshop™ comp

CSS3-BG image

 

top top

middle middle

bottom bottom

 

CSS3 Code

#wrapper {
text-align:center;
margin:0 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 background color was added last for devices that may have images turned off.*/

Html Code

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

 

    bookmarks