How to make a background image fill the entire screen without losing image resolution

Question

I have a part on my site where I need to put a background image occupying the entire screen, both wide and high. I managed to do this with css.

.intro {
  display: table;
  width: 100%;
  height: 100%;
  padding: 100px 0;
  text-align: center;
  color: white;
  background: url(../img/Banner-Site.png) no-repeat bottom center scroll;
  background-position: 30% 45%;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

But the problem is that it ends up popping the image, I mean, I lose the resolution and sharpness of the image. I’ve tried putting the image in a bigger size, but it doesn’t solve.

I have a monitor with a resolution of 2560 x 1080. I tested putting the images in a size of 3000 x 1000. And smaller sizes too. All images are in PNG, saved in Photoshop as web file.

Can someone help me?

Answer 1

Do you really want the image to occupy the entire viewport? If so, it has a relative measurement unit, which is widely used in responsive design. The vh and vw.

Many web responsive design techniques rely heavily on rules percentage. However, percentage HSC measures are not always the best solution for all problems. width in CSS is related to nearest element-ancestal. But what if you wanted to use width or the height of the viewport instead of the width of the parent element? That’s exactly what the vh and vw units provide.

The measure vh is equal to 1/100 of the height of the viewport. So, for example, if the height of the navigator is 900px, 1vh equals 9px and, similarly, if the width of the viewport is 750px, 1vw is 7.5px.

There are infinite possibilities of use with these units. For example, "sliders" of full height (full-height) could be achieved with a single line of CSS:

.slide {
    height: 100vh;
}

SOURCE:http://desenvolvimentoparaweb.com/css/unidades-css-rem-vh-vw-vmin-vmax-ex-ch/

* {
  padding:0;
  margin:0;
}
.intro {
  display: table;
  width: 100%;
  height: 100vh;
  padding: 100px 0;
  color: white;
  background: url('http://lab27.blob.core.windows.net/wordpress/2016/05/css-code.jpeg') no-repeat bottom center scroll;
  background-position: 30% 45%;
  background-size: cover;
}

<div class="intro"></div>

Answer 2

Hello! I want to help, but I need a little more information. I saw that you provided the information about the image. But I right here with a random image of the Internet had no problems with the code and it seemed normal. Could you provide the image? Or describe what you are trying to do? Do you want to cover the entire screen with the image? I’m sorry to put it here in answer form, but I’m not at liberty to comment.

EDIT

If to occupy the entire screen, it needs to be in display: table?

That would work:

.intro {
    display: block;
    width: 100vw;
    height: 100vh;
    padding: 0;
    text-align: center;
    color: white;
    background: url(../img/Banner-Site.png) no-repeat bottom center scroll;
    background-position: 30% 45%;
    background-color: black;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

EDIT 2

If the image is large enough, you can replace the cover for contain. There is less possibility of distortion. The cover forces the image to fit whole on the screen, already the contain fits her in the best way possible.

Personally recommend a much wider image than high for desktop and a higher version than wide for mobile. And this way use the contain not to distort.

EDIT 3

body {
    margin: 0;
}
.intro {
    display: block;
    width: 100vw;
    height: 100vh;
    padding: 0;
    text-align: center;
    color: white;
    background: url(../img/Banner-Site.png) no-repeat bottom center scroll;
    background-color: black;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
    -o-background-size: contain;
}

These stripes on the sides I would have to see in your image, because here I am not able to simulate, but at first I imagine it may be of the margin created by body. But in question the responsiveness, so I said make versions. You would have to work with Media Queries and versions of the same image to better adapt to mobile or tablet. Maybe this part is better if you do a little research to better understand, but what they do is adapt their CSS to different types of screens, like smartphones and tablets.