home

CSS3 Backgrounds

It will allow you to create the background image for box elements, this will give the controllability of background, by using background-image property we can set one or more images for any element, we can create margins and paddings also border for a background image. and by default background-image placed at top and left(0px 0px) corner of the element.

css3 has two new background properties:-

CSS3 the background-size Property

This can specify the size of the background image; you can specify the width in percentages and pixels like width and height.

<div id="background-size"></div>
<style>
#background-size {
    background: url(img_cars.png);
    background-size: 100px 60px;
    background-repeat: no-repeat;
}</style>

CSS3 The background-origin Property

This property specifies the positioning area of the background images.

<div id="background-origin"></div>
<style>
#background-origin {
    background: url(img_cars.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
}</style>