How to make background-image all full-screen with html css-CodePudding

I am working on a file html css and I want to create background-image full-screen in HTML, and CSS I have set all properties for background image. I want that background-image to fill all full-screen on devices and without scrolling on background-image so I try to do this:

   * {
            margin: 0;
            padding: 0;
        }
        
        .background-image {
            position: relative;
        }
        
        img {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            position: fixed;
            height: 100%;
            width: 100%;
        }
    </style>

<div >
        <img src="./Landing_Page_TBB.jpg" alt="Landing_Page_TBB.">
    </div>

I set the background-image position relative and img position fixed to make fixed without scrolling but it brings the background-image is streched also text? Any idea to fixed it ?

CodePudding user response：

If you want a background image use create a container and with css add the background-image property to the container: url('the path of my img')

Some advice I can give you is:

img

Use IMG if you want people to print the page and you want the image to be included by default.
Use IMG if you want the browser to display an image in proportion to the size of the text.
Using IMG instead of background-image can drastically improve the performance of animations over a background.

css background-image

Use CSS background-image if the image is not part of the content.
Use CSS background-image when the image replaces the text
Use CSS background-image combined with CSS background-size:cover in order to stretch a background image to cover the entire container
Use CSS background-image if you want people to print the page and you do NOT want the image to be included by default.

CodePudding user response：

use the object-fit property and object-position property. Here you are not actually working on the background. The image is a element not a background. To make it a background you have to use URL of the image.