Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set the size of the background image with JavaScript?
In this tutorial, we will look at the method to set the size of a background image with JavaScript.
Background effects on a webpage enhance its look. We can set a background color or a background image to enhance the feel of the webpage. We can also change the background properties, like its size or color.
To enhance the feel, the image must fit in the right position with the right size. Generally, we do this by using CSS, but JavaScript DOM also provides properties to do so.
So, let us look at how to set the size of the background image.
Following are the property by which we can set the size of the background image with JavaScript ?
- backgroundSize property
Using the backgroundSize Property
JavaScript DOM provides us with a way to design our page in run-time. We can even apply an image to the background and change its size. The background-size property of JavaScript sets the size of the background image.
If we set like backgroundSize = "100px", then the width of the background image will set to 100px and the height will adjust to auto.
If we set like backgroundSize = "100px 200px", then the width of the background image will set to 100px and the height will set to 200px.
All the users can follow the below syntax to use the backgroundSize property to set the size of the background image using JavaScript ?
Syntax
document.body.style.backgroundImage = "url('<image address here>')";
document.body.style.backgroundSize = "auto || Length || Percentage || Cover || Contain || Initial || Inherit";
Parameters
- auto ? Displays the image to its original size (Default value).
- Length ? Can be used to set both height and width. The other will be set to auto if only one dimension is provided.
- Percentage ? Set height and width in the percentage
- Cover ? Set the image such that the image can cover the whole element.
- Contain ? Set the number of images as possible within a parent.
- Initial ? Set to the Default value.
- Inherit ? Inherits the parent property.
Example 1: Basic Background Size Setting
You can try to run the following code to learn how to set the size of the background image ?
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 2px dashed blue;
width: 600px;
height: 400px;
background:
url('https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg') no-repeat;
}
</style>
</head>
<body>
<button onclick="display()">Set size of background image</button>
<div id="box">
</div>
<script>
function display() {
document.getElementById("box").style.backgroundSize="150px 200px";
}
</script>
</body>
</html>
We can set the image size of the background image by clicking the button "Set size of background image".
Example 2: Toggle Background Size
In the example below, we used the backgroundSize property to set the size of the background image. The image has been applied to the div using CSS and will change its shape on clicking a button and will return to its original shape if clicked again.
<html>
<head>
<style>
#image_div{
width: 40%;
height: 30%;
background-image:
url(https://www.tutorialspoint.com/images/logo.png);
}
#btn{
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<h2> Use <i> backgroundSize </i> to set the size of the background image
</h2>
<div id="image_div"> </div>
<button id="btn">
Click to apply the background image and change its size
</button>
<script>
var element=document.getElementById("btn");
var div=document.getElementById("image_div");
element.addEventListener("click",changeShape);
function changeShape(){
if(!div.style.backgroundSize){
div.style.backgroundSize="100% 100%";
} else {
div.style.backgroundSize=null;
}
}
</script>
</body>
</html>
In the above example, users can see that we have used the backgroundSize property to set the background image size after clicking a button applied on a container.
Example 3: Interactive Size Customization
In the below example, we will accept two values of the image for width and height from the user. We also accept the parameter of the value (em, px, %, and cm) through a radio button. First, we will take an integer value from the user and append the selected parameter to it. After clicking a button, we will run a function that will set the size of the background image as a value given by the user.
<html>
<head>
<style>
#container{
width: 90%;
height: 90%;
background-image:
url(https://www.tutorialspoint.com/images/logo.png);
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h3> Use <i> backgroundSize </i> to set the size of the background image </h3>
<div id="container">
</div>
<label for="w_input"> Width(only integer)(required) : </label>
<input type="text" name="value1" id="w_input"/> <br>
<label for="h_input"> Height(only integer)(optional) : </label>
<input type="text" name="value2" id="h_input"/> <br>
<input type="radio" name="radio_btn" id="pixel" value="px"/>
<label for="pixel"> px </label> <br>
<input type="radio" name="radio_btn" id="emph" value="em"/>
<label for="emph"> em </label> <br>
<input type="radio" name ="radio_btn" id="percent" value="%"/>
<label for="percent"> % </label> <br>
<input type="radio" name="radio_btn" id="centime" value="cm"/>
<label for="centime"> cm </label> <br>
<button id="btn"> Set background Image size </button>
<script>
var element=document.getElementById("container");
var button=document.getElementById("btn");
button.addEventListener("click", set_Size);
function set_Size(){
var width=document.getElementById("w_input").value;
var height=document.getElementById("h_input").value;
var radio_selected=document.querySelector('input[name="radio_btn"]:checked');
var width_length=width + radio_selected.value;
if(height){
var height_length=height + radio_selected.value;
var width_height=width_length + " " + height_length;
} else {
var width_height=width_length;
}
element.style.backgroundSize=width_height;
}
</script>
</body>
</html>
In the above example, users can see that we have changed the size of the background images within a container by clicking the button.
Common Background Size Values
| Value | Description | Example |
|---|---|---|
cover |
Scales image to cover entire element | backgroundSize = "cover" |
contain |
Scales image to fit within element | backgroundSize = "contain" |
100px 200px |
Sets width and height explicitly | backgroundSize = "100px 200px" |
50% |
Sets width as percentage, height auto | backgroundSize = "50%" |
Conclusion
The backgroundSize property provides flexible control over background image sizing in JavaScript. Use specific values for precise control or keywords like "cover" and "contain" for responsive designs.
6K+ Views
