Background image turns out blurry-CodePudding

I'm trying to add a background image to a grid item, but regardless of which browser I use, the image always turns out blurry. The original dimensions of the photo are 6000 x 4000. Here is the code that I used for the grid:

.content {
 grid-area: content;
 padding-top: 15%;
 background-image: url("https://drive.google.com/thumbnail?id=14rw1Bbhf5MWV3BlBx3G0tVzmoUcK03I6");
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

This is the original image:

And this is what the image looks like from the webpage (ignore the text):

I've also tried converting the image to .svg or .eps, but that just makes the picture turn out even worse. Does anyone know a solution to this?

CodePudding user response：

Your image is not big enough to be shown on full screen and that's why its blurry. I have copied the original image link you have pasted in your question and updated the .content class. Use this and set the height: 100vh:

   .content {
        grid-area: content;
        padding-top: 15%;
        background-image: url("https://i.stack.imgur.com/xkpSw.jpg");
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100vh;
    }

CodePudding user response：

Try a different image host. The Problem seems to bee with Google Drive & not with your code. The image sent by Google Drive is already compressed.

CodePudding user response：

You seem to be picking up the thumbnail version of the image which is of course much smaller and so when you ask it to cover the page it gets blurry.

It seems as though the original large version with the dimensions you mention can be picked up like this:

.content {
  grid-area: content;
  padding-top: 15%;
  background-image: url("https://drive.google.com/uc?id=14rw1Bbhf5MWV3BlBx3G0tVzmoUcK03I6");
  background-repeat: no-repeat;
  background-size: cover;
}

.inner {
  /* just to give some content for this demo */
  height: 100vh;
  display: inliine-block;
}

<div class="content">
  <div class="inner"></div>
</div>

But you probably don't want such a large file for normal browser use - perhaps get an intermediate size and store it yourself?

Note, the image is in focus in the foreground, but even on this very large size it looks a bit burry at the top of the parachute - that is just what the image is.

CodePudding user response：

I had a problem similar to yours, I solved it by changing the background size

instead of

background-size: cover;

I used

background-size: 100% 400px;

You can play around with that to get your desired outcome, worked for me I hope it works for you aswell!