'How to make background-image full-screen with html+css

I want to create background-image full-screen in HTML, and CSS I have set all properties for background image. This is my background-image on folder.[![enter image description here][1]][1]

I try to do this.

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .background-image {
            background-image: url("https://via.placeholder.com/100.jpg");
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
            height: 100vh;
            width: 100%;
        }
    </style>
<body>

    <div class="background-image"></div>

</body>

But I don't want the background-image on the top to hidden or cut, I want to display all background-image full-screen. As you can see, missing the text above. Any idea how to fix this?

htmlcss


Solution 1:[1]

You could use background-size: contain instead of cover. That way the image will expand to fill the avialable space but will not be cut. This will leave empty spaces around the image.

If you want to have the gradient background to fill the whole area (so you don't have empty spaces) you could use 2 backgrounds:

  • one with the gradient with background-size: cover
  • one where you cut out the subject of the picture (with Photoshop or a similar program) and with background-size: contain

Edit:

I made an example with a css gradient. The kitten should be the subject. I gave it at fixed height (400px) in stead of contain, but on smaller screens it will cut the kitty. If you don't want sliced kitten, you can change the 400px in the example below to contain.

#full-screen {
    position:fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        center / 400px url(https://placekitten.com/400/400) no-repeat,
        radial-gradient(#e66465, #9198e5);
}
<body>
    <div id="full-screen">
    </div>
</body>

For more technical details and options you can consult the documentation at developer.mozilla.org, that's a great resource:

https://developer.mozilla.org/en-US/docs/Web/CSS/background

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions