CSS3 contains different background properties.
With this, we can easily control background elements.
Table of Contents
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.
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 the following three areas,
- border-box
- padding-box
- content-box
CSS
div {
background: url(backgroundImage.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: border-box;
}
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 background images.
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 the required png images for executing the above code.
I build websites | Been building websites for the last 3 years and been venturing into App Development now.
Tech Stacks: C, HTML, CSS, JavaScript, C++