CHANGE AN ELEMENT’S BACKGROUND IMAGE

In CSS3, three new properties were added to give you better control over background images repeating size, origin area, and clip area. Also, you can now layer multiple background images on top of each other:

selector {
   background-image: url(imagefile), ...;
   background-size: sizetype, ...;
   background-origin: boxtype, ...;
   background-clip: boxtype, ...;
 }

The background-size property enables you to control the absolute size of a background image. The sizetype value can be a height and width as either an absolute size or percentage or two possible keywords: cover, which scales the image to the smallest size to fit in a content area, and contain, which scales it to the largest size to fit in a content area. ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.