How to fit background image in all screen sizes?-CodePudding

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;
}

CodePudding user response：

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;

CodePudding user response：

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

CodePudding user response：

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.