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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.