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

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

  

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

     

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

     

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

.slide {
    height: 100vh;
}

SOURCE : link

* {
  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>

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 I had no problems with the code and it seemed normal. Would you be able to provide the image? Or describe what you are trying to do? Do you want to cover the entire screen with the image? Sorry to post here as a reply, but I'm not allowed to comment.

EDIT

If it is to occupy the entire screen, it must be 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 cover with contain . There is less possibility of distortion. The cover forces the image to fit on the entire screen, while contain fits it as best as possible.

I personally recommend a much wider than high desktop image 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 tiles 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 could be the margin created by body . But in question the responsiveness, so I said of making versions. You would have to work with Media Queries and versions of the same image to best suit your mobile or tablet. Perhaps this part is better for you to do a little research on to understand better, but what they do is adapt your CSS for different types of screens, such as: smartphones and tablets.