CSS3 contains different background properties.
With this, we can easily control 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 used for different contexts.
Also, specify the size in two different constraints that is pixel & percentage.
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 the following three areas,
- border-box
- padding-box
- content-box
div {
background: url(backgroundImage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: border-box;
}
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 background images.
div {
background: url(img_tree.gif), url(img_flwr.gif);
background-size: 100% 100%;
background-repeat: no-repeat;
}Full HTML & CSS Code
<!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 the required png images for executing the above code.
Meet Mukul, a passionate visionary and a dedicated 3D printing enthusiast. With an insatiable curiosity for technology and a flair for creativity, Mukul has discovered a world where innovation knows no bounds. Armed with a deep understanding of 3D printing and its endless possibilities, he has become a true pioneer in the field, constantly pushing the boundaries of what can be achieved with this remarkable technology.