how to make background image to be one full page without cropping the image

Question

I am trying to make the webpage, and I have trouble setting the background image of the webpage. I want my background image to be one full page without cropping or zooming the image or requiring scrolling. I have my background image with the size of 1920x1080. I thought this size should make the webpage to be one full page, but it did not. What should I do for the image to fit on one page?

   background-image: url('image/background1-1.png');
   width: 100%;
   height: 100vh;

This code is what I have done for the background image, but it crops the image.

Also, I am following the size or location of the images from the design that I did in XD. However, it does not match if I apply it as a code. For example, according to XD, the location of the text is top: 328px; left: 786px, but if I apply this information to my code, the text does not appear where the text is supposed to appear.

I am struggling with these questions. I would appreciate your help as I do not have much knowledge regarding this topic.

Answer 1

You're looking for the background-size property. If you truly don't want to crop the image at all, use contain , but this will likely not feel like a true background image. cover will enlarge the image just enough to fit within the bounds of the browser window's dimensions, and will crop it slightly when the browser's w/h ratio isn't identical to your images w/h ratio.

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

background-image: url('image/background1-1.png');
background-color: #000;
background-position:center center;
background-repeat; no-repeat;
background-size: cover; /* contain */
width: 100%;
height: 100vh;

Answer 2

you can add this

    background-image: "url(/meals/3.jpg)",
    background-position: "center",
    background-repeat: "no-repeat",
    background-size: "cover",