Background-Size

The size of a background image.

Syntax
      background-size: Width [height] | cover | contain ;

Width [height] - Set a fixed size for the background image.
The values can be set in px, pt, em or % (percentage of the parent element). If only one value is given, the height is set to the default "auto".

contain - Scale the background image so that its full width and height are contained within the content area, this will not fill the background area unless the proportions match.

cover
- Scale the background image to completely cover the background area even if some parts of the image are pushed out of view.

New in CSS3 is the ability to specify multiple background images. You can (optionally) specify the background-size for multiple images as a comma-separated list, these will then be applied (in order) to each of the images specified by background-image.

Examples:
h1 { background-size: 300px 150px; }
.ss64class { background-size: 100% 100%; }

#SS64id { background-size: contain; }

Try it:

This is a sample of text with a CSS background image.
To avoid distortion the background size must match
the actual dimensions of the image.

(CSS 3) Browser Support: IE9+, Firefox 4+, Opera, and Safari 5+.

“I've learned that our background and circumstances may have influenced who we are, but we are responsible for who we become” ~ James Rhinehart

Related:

Background-Image - The background image for an element.


© Copyright SS64.com 1999-2014
Some rights reserved