How To Set The Div Height to Auto-Adjust to Background Size

admin_img Posted By Bajarangi soft , Posted On 08-10-2020

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.

CSS Divs

Example:  Since the image is the background image of the div, therefore, the heading GeeksforGeeks appears over the image.
1.Create a Div Using CSS

<!DOCTYPE html>
<html>
<head>
    <title>Title of the document</title>
    <style>
        div {
            background-image: url(b1.jpg);
            background-repeat: no-repeat;
        }
        img {
            visibility: hidden;
        }
        h1 {
            position: absolute;
            left: 35%;
            top: 30%;
            color: white;
        }
        p{
            position: absolute;
            left: 35%;
            top: 40%;
            color: white;
        }
    </style>
</head>
<body>
<div>
    <h1>Bajarangi Soft</h1>
    <p>Bajarangi Soft was founded in 2018 by two expert developers looking to expand their knowledge of code worldwide</p>
    <img src=
                 "bg.jpg"
         alt="Image" />
</div>
</body>
</html>

Related Post