More images as backgroud – image

Our example has an old-style paper background, with additional decorative images aligned to the the top-left and bottom-right corners:

The code for this can be written in one of two ways, either:

#example A

{
width: 500px;
height: 250px;
background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg);
background-repeat: no-repeat;
background-position: left top, right bottom, left top;
}

or:

#exampleB

{
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}

Comments are closed.