This tutorial will help you to learn about the “background-size” property of CSS and how to set it in your HTML element.

The CSS3 method is strongly preferred now a days, as it has given the flexibility to resize the background image and can be reused in different contexts.

One can specify the size in pixels or percentages.

 


Background Size Syntax


Keywords syntax-
background-size: cover /*Background image will cover both the coordinate of containing box.*/
background-size: contain /*Small size images will spread till the containing box covers completely.*/

One-value syntax. First value is width and height will automatically set to auto-
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

Two-value syntax. First value define the width and other value define the height-
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

 

Example 1 – Background Size in DIV

The below CSS code will show you background property. In the DIV section we have used background image and size property. In “background-image” property we have provide image name and its path and “background-size” is to provide the suitable size for the image which you can also vary as per requirement.

background-size-div

CSS Code



div{
background-image: url('images/wood.jpg');
background-size: 300px 100px;
background-repeat: no-repeat;
}

HTML Code



<!DOCTYPE html>
<html>
<head>
<title>Background CSS Example </title>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- "Example of Background image size for div." By FormGet.com -->
<div id="head">
<h3>CSS Background-Size</h3>
<p>
This is a sample Text that is being used to show tutorial.<br/>
You can easily check the live demo with example.<br/>
FormGet is a <a href="https://www.formget.com">online form builder</a>.
</p>
</div>
</body>
</html>

 

Example 2 – Background Size in Textarea

In the above example we learned to use background property for DIV section. In this example we have cover it for textarea.

background-size-textarea

CSS Code


textarea{
background-image: url('images/diary-new.png');
background-size: 300px 100px;
background-repeat: no-repeat;
}

HTML Code



<!DOCTYPE html>
<html>
<head>
<title>Background CSS Example</title>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- "Example of Background image size for Textarea." By FormGet.com -->
<div id="head">
<form action="#" method="post">
<label>Textarea Write your text</label><br />
<textarea id="sample" rows="10" cols="45"></textarea>
</form>
</div>
</body>
</html>

 

Conclusion: 

This tutorial is aimed towards adding background image to any HTML element. Just follow the example and demo to add background image to any HTML element. This tutorial shows two examples in parallel on how the background image works on two different HTML elements. The download file contains both the examples in it. You can follow the tutorial all along to add background image to any possible HTML element.