Sometimes, while creating a website, it is required to make a div adjust its height automatically according to the background without having the need to set a specific height or min-height. It makes it convenient for the developer while writing the code.
We’ll create an img element inside our div and will set its src same as that of our background image. It’s visibility will be set as hidden so that only the background image will appear. Set the background-repeat property of the div element to “no-repeat” so as not to repeat the image.
Example: Since the image is the background image of the div, therefore, the heading GeeksforGeeks appears over the image.
- Set the size of background image using CSS ?
- CSS | background-size Property
- Difference between background and background-color
- HTML width/height Attribute vs CSS width/height Property
- CSS | height Property
- CSS | max-height Property
- CSS | Height and Width
- p5.js | height variable
- CSS | min-height Property
- How to change the height of br tag?
- CSS | line-height Property
- How to fix the height of rows in the table?
- HTML | <th> height Attribute
- How to Set full height in box-inner div using bootstrap 4 ?
- HTML | height Attribute
- How to get the width and height of an image ?
- HTML | <img> height Attribute
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.