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

I have a part on my site where I need to put a background image occupying the entire screen, both width and height. 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 this ends up bursting the image, that is, I lose the resolution and sharpness of the image. I have tried putting the image in a larger size, but it does not solve.

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

Can anyone help me?

Author: Wess, 2017-02-09
Source

2 answers

Do you actually want the image to occupy the entire viewport? If yes it has a relative unit of measure, which is quite often used in responsive design. Or vh and vw.

Many responsive web design techniques rely heavily on rules percent. However, percentage CSS measures are not always the best solution for all problems. width in CSS is relative to closest ancestral element. But what if you wanted to use the width or the height of the viewport instead of the parent element width? This is exactly what the VH and vw units provide.

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

There are endless possibilities for use with these units. For example, full-height sliders could be achieved with a single line CSS: 

.slide {
    height: 100vh;
}

FONTE: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>
 2
Author: Gilmar Santos, 2017-02-09 17:57:24

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 from the internet had no problems with the code and it seemed normal to me. Would you have how to provide the image? Or describe what you're trying to do? Do you want to cover the entire screen with the image? Sorry to put here in response form, but I'm not allowed to comment.

EDIT

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

This 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 with contain. There is less possibility of distortion. The cover forces the image to fit completely on the screen, while the contain fits it as well as possible.

I personally recommend a much wider than high image for desktop and a higher than wide version for mobile. And in this way use contain to not 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 that it may be from the margin created by body. But in question the responsiveness, so I said to do 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 you research a little about to better understand, but what they do is adapt their CSS for different types of screens, such as: smartphones and tablets.

 0
Author: Leon Freire, 2017-02-09 18:26:14