How to fit background image in all screen sizes?

Question

i am having issues with my background image. Somehow on big screen the head is cut off to fit the screen. Is there a way to ensure that 100% of the picture is always rendered regardless of size of the screen? initial property of background-size is cover but when set this way the top of the image is cut to fit the container. When i change background-size to 100% 100% as per below i get the result i want but the quality of the image is impacted. Is there a way to work around this. I have reviews most documentation related to background-image but none of them give me the result i want. both html and body height/width are set to 100%.

Thanks in advance for the help. Leo

.main .masthead {
    min-height: 100%;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
    text-align: center;
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(92, 77, 66, 0.8)), to(rgba(92, 77, 66, 0.8))), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
    background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: 100% 100%;
    z-index: 1;
    width: 100vw;
}

Answer 1

You should use cover or auto in media query so it will cover the whole area as per screen size.

background-repeat:no-repeat;
background-size:cover;

Answer 2

To fit the background image to fit the screen size we could set the background-size property to contain. On setting the background-size to contain; it tells the browser that the image scales to fit the content area without losing its aspect ratio

For more understanding refer the link provided: https://www.bitdegree.org/learn/responsive-image#setting-background-size-to-fit-screen

Answer 3

It is best to have the following settings in your main CSS file to delete all surrounding spaces by default

 body, ::after, ::before { box-sizing: border-box;important: padding; 0px:important; margin: 0px !important; }

Then consider the following styles for the body:

 body { background-repeat: no-repeat; background-size: cover; background: -webkit-gradient(linear, left top, left bottom, from(rgba(92, 77, 66, 0.8)), to(rgba(92, 77, 66, 0.8))), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg); background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg); }

If your image deteriorates, download your image and use Photoshop or other tools to maintain image quality.