O'Reilly logo

HTML5: Your visual blueprint™ for designing rich web pages and applications by Adam McDaniel

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required