Css Images

From CSS Discuss

Jump to: navigation, search

Adding background images via CSS

Use the url() value. The url must be absolute or relative to the css document (relative to the folder where the css document is).

Example: adding a background image at the top of a page:

body {
   background: #E3A832 url(bamboo.gif) 0 0 no-repeat;
}

First comes the default color for the background, then the background image properties. The first 0 is the distance from the left edge of the element (<body>), and the second is the distance from the top edge.

To be compatible with somewhat older browsers, you can separate each argument:

body {
background-attachment: fixed ;/* or: scroll*/
background-color: white ;
background-image: url(image.png) ;/* or: none*/
background-position: top left ;/*or: top/bottom left/right x% y-value*/
background-repeat: no-repeat ;/*or : repeat,  repeat-x, repeat-y, no-repeat*/
}

Multiple background images

A single element can only have one background image. But you can layer multiple elements on top of each other to create the illusion of multiple background images if necessary. For example:

  <div style="background: url(flower.png) top right no-repeat;">
    <div style="background: url(grass.png) top left repeat-y;">
      ...
    </div>
  </div>

The drafts for CSS3 propose ways to specify multiple background images on a single element, but at the time of writing there isn't any support for them except for Safari. For example:

  background-image: url(flower.png), url(grass.png);
  background-position: top right, top left;
  background-repeat: no-repeat, repeat-y;
Personal tools