CODEWITHSUNDEEP
css
Edgar Navasardyan
Edgar Navasardyan

Reputation: 4501

CSS background image is rendered blurred and not entirely

I am having trouble trying to place an image as background on my website. Here's how the original image looks like:

enter image description here

And here's how the image appears on my website (from Chrome):

enter image description here

As you see, the picture is not entirely rendered (clearly seen looking at the coffee cup and notebook display).

Here's the css that I use:

 body {
    overflow:hidden;
    background: url('/static/media/images/welcome1.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover; 
    background-size: cover;
}

What am I doing wrong?

Upvotes: 2

Views: 8437

Answers (3)

grinmax
grinmax

Reputation: 1855

Maybe try 'background-size: 100%;' it background always will width 100%

Example - https://jsfiddle.net/grinmax_/g5sht11p/

.container {
  width: 100vw;
  height: 100vh;
  background: url(https://i.sstatic.net/SK2W1.jpg) no-repeat;
  background-size: 100%;
}
<div class="container"></div>

Upvotes: 2

Johannes
Johannes

Reputation: 67748

It seems you are using a too small version of the picture which becomes blurry when it's enlarged beyond its own size.

Use a larger version if possible: That's a stock photo from pixabay or something, isn't it? Go there and look if there is a larger version available (usually there is), and use that instead.

BTW: I reread the question: You say you are missing parts of the coffe cup and the notebook display: That's due to the different width/heigth proportion of the image part that is displayed. This happens automatically when you use background-size: cover to fill the whole available space with the background image. (The first part of my answer referred to the blurryness)

Upvotes: 1

jrSakizci
jrSakizci

Reputation: 171

you are using "cover", thats why image gets blur when page rendered. If you use images with higher resulotions than the screen, problem will be solved. Just try to find bigger images than your screen and try it with developer tools. You will see and understand the difference.

Upvotes: 3

Related Questions