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

Question

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 class="background-image"> </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?

Answer 1

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.

Answer 2

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.