All CSS3
Inaam  

CSS3 Backgrounds

CSS3 contains different background properties.

With this we can easily control to background elements.

list of border properties

  • background-size
  • background-origin

 

CSS3 background-size Property

Using background-size we can change the background size easily. so that it will be use for different context.

Also specify the size in two different constraint that is pixel & percentage.

Background size
Background size
CSS
div {
    background: url(backgroundImage.png);
    background-size: 80px 60px; /* Percentage instead of pixel (background-size: 100% 100%;)  */
    background-repeat: no-repeat;
}

 

CSS3 background-origin Property

Background-origin property specifies the position area of background images.

Image can be placed for following three areas,

  1. border-box
  2. padding-box
  3. content-box
Background Origin Borderbox
Background Origin Borderbox
CSS
div {
    background: url(backgroundImage.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: border-box;
}

 

Background Origin Contentbox
Background Origin Contentbox
CSS
div {
    background: url(backgroundImage.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
}

 

CSS3 Multiple Background Images

In css3 we can also add multiple backgrounds images.

Multiple Backgrounds
Multiple Backgrounds
CSS
div {
    background: url(img_tree.gif), url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

 

Full HTML & CSS Code

HTML & CSS
<!DOCTYPE html>
<html>
    <head>
    <style>
        div.backgroundSize {
            background: url(backImg.png);
            background-size: 80px 60px;
            background-repeat: no-repeat;
            padding-top: 40px;
        }
        div.backgroundOrigin {
            border: 1px solid black;
            padding: 35px;
            background-image: url('backImg1.png');
            background-repeat: no-repeat;
            background-position: left;
        }

        div.borderBox {
            background-origin: border-box;
        }

        div.contentBox {
            background-origin: content-box;
        }

        div.multipleBackground {
            background: url(backImg.png), url(backImg1.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    </style>
    </head>
    <body>

        <div class="backgroundSize">
            <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            </p>
            <p>Original image: <img src="backImg.png" alt="post" width="150" height="150"></p>
        </div>


        <p>background-origin:border-box:</p>
        <div class="backgroundOrigin borderBox">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </div>
        <p>background-origin:content-box:</p>
        <div class="backgroundOrigin contentBox">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </div>

        <div class="multipleBackground">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        </div>

    </body>
</html>

Note : Please add required png images for executing above code.
 

Leave A Comment