How To Fit Background Image In CSS
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Ashish
In this tutorial we will show you the solution of how to fit background image in CSS, you'll also learn how to make that image responsive to the screen size of your viewers.
A common task in web design is stretching a background image to fill the entire browser screen.
Luckily, this work can be accomplished with just a few lines of CSS. In this tutorial, we will check How to fit background images in CSS.
Step By Step Guide On How To Fit Background Image In CSS :-
The CSS background-size: cover; property can be used to stretch and scale a picture in the background using only CSS.
This enlarges the image to the point that the background image entirely covers the background region while maintaining the image's intrinsic aspect ratio.
However, if the width or height of the scaled background picture is too large from the element, part of the image may not be shown (cropped either vertically or horizontally).
The following is an example of How to fit background image in CSS
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div{
background-image: url("img/fit.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
</style>
</head>
<body>
<div>
<img src="img/fit.jpg">
</div>
</body>
</html>
- To begin, type <! DOCTYPE html> to indicate that the file is in HTML format to the web browser.
- The <html> element, on the other hand, is used to indicate that HTML content is about to begin.
- The information about web pages is now contained in the <head> tag. This tag uses the < title> element to provide a web page title. The <head> and <title> tags, for example, are paired tags. As a result, both have the closing tags </head> and </title>.
- After that, make sure you've set up an assets directory (folder) to store all of the photos you'll need for your project. For example, in the project we're working on, we've created an img folder and placed an image called fit.jpg in it.
- Finally, the < body> element is used to specify the webpage's content. All of the content for the website will be written here. The <img> element has been used to define the picture. You can use an absolute path to add photos, which is a full web address that starts with a domain URL (http://www.). In our case, we named it fit.jpg, which is also the name of the image in our file directory.
- In the head tag, a <style> tag was used. We utilised the Cover property to stretch the width of the image proportionately and fit the height of the image to the screen height.
- Suppose I want the tree to be centred in the viewport. To accomplish this, we have simply changed the value of the background-position attribute inside the div to centre centre.
- Then we have closed tags for the <body> and < html> with </body> and </html>, respectively.
Conclusion :-
Using images as adjustable backgrounds within HTML components has clearly been simplified and streamlined thanks to CSS and more responsive design principles.
Now that you know how to make a responsive, full-page picture, it's time to get to work on some stunning websites! To fit a background picture in CSS, follow the procedures outlined above.
I hope this tutorial on how to fit background image in CSS helps you.
About Ashish
