In this tutorial we will show you the solution of background image CSS size, as background image size means that we can apply an image to the background of a div and of the body also.
So, how to use CSS property background-size to configure an image. Let us understand this with help of an example.
Step By Step Guide On Background Image CSS Size :-
Now, before starting our example. Let us see the syntax of the background-size property of CSS to use this in an image.
background-size: auto|length|cover|contain|initial|inherit;
As there are many values that background-size property acquire. So, we first discuss them one by one.
- Auto – this is the default value of the background-size property.
- Length – this helps to sets the width and height of an image.
- Percentage – this property helps to set width and height also but in percentages with respect to the parent element.
- Cover – this helps to cover the entire background.
- Contain – contain helps to resize the background image to make sure that the image is properly visible.
- Initial – this sets the value of background-size to its initial stage.
- Inherit – inherit means that the value is dependent on the parent element.
<!DOCTYPE html>
<html>
<head>
<title> background size CSS size </title>
<style>
#image1 {
border: 2px solid black;
padding: 25px;
background: url(img_tree.gif), url(talkercode_official.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}
#image2 {
border: 2px solid black;
padding: 25px;
background: url(talkercode_official.jpg);
background-repeat: no-repeat;
background-size: contain;
}
#image3 {
border: 2px solid black;
padding: 25px;
background: url(talkercode_official.jpg);
background-repeat: no-repeat;
background-size: cover;
}
#image4 {
border: 2px solid black;
padding: 25px;
background: url(talkercode_official.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h1>
Talker’s code
</h1>
<h2>
Background image CSS size
</h2>
<div id="image1">
<div id="image2">
<div id="image3">
<div id="image4">
<div id="image5">
</body>
</html>
- As, here we see that we that in above example we show you an example in which HTML and CSS codes are used.
- Here, first of all, we create a basic structure of HTML, in which we use <!DOCTYPE html> which defines the type of document. And next one is our HTML tags. These tags are paired tags and all the data regarding HTML is written inside these tags.
- After we use our head tag which is again paired tag and contains the title and meta information of the webpage. The data written inside the head is not shown on the webpage.
- Now, next is our title tag which defines the title of the webpage. The tag which has its closing tag is known as a paired tag. So, this is again a paired tag.
- Now, next is the body which is the main tag of HTML. The data which we have written inside the body is shown on the webpage. Mostly all tags which are helpful to show data or information on the screen are written under the body tag.
- As, here we see how to use different background-size properties using CSS. The example above may help you better to see how our codes work.
Conclusion:-
At last, in conclusion, here we can say that with the help of this article we can understand background image size with using CSS.
I hope this tutorial on background image CSS size helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
