CSS3 Backgrounds

March 12, 2015
by Inaam Hussain

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.
 

About

Engineer. Blogger. I like to be updated on new upcoming emerging technologies.

Get notified on our new articles

Subscribe to get the latest on Node.js, Angular, Blockchain and more. We never spam!
First Name:
Email:

Leave a Comment