Question 169030 in CSS Question posted in
Some basic documentation can be found here.

? Why is my background image still distorting after adding CSS styles?

I am trying to style a div by adding a background image. I have set h-screen, bg-no-repeat , bg-cover , bg-center. Yet its still not preserving the sharpness of the original picture.

I tried bg-no-repeat, bg-cover, bg-center and h-screen. I was expecting it to maintain its original sharpness and quality This is the codepen. How do i stop the bg image from losing its quality.

CSS

#container {
  height: 100vh; 
  background-image: url('https://media.istockphoto.com/id/1162729319/photo/interior-of-a-fine-dining-indian-restaurant.jpg?b=1&s=170667a&w=0&k=20&c=puLKYH_iuK79S2_s27PhINO7rhvN9pej7gGbbH429Fg='); 
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
}

HTML
<div id='container'> hello </div>

Tags:

2

Answers


  1. 0

    You use a different image, that is of higher resolution.

    Login or Signup to reply.
  2. 0

    The original size of the image you are using in your code pen is 509 x 331px (https://media.istockphoto.com/id/1162729319/photo/interior-of-a-fine-dining-indian-restaurant.jpg?b=1&s=170667a&w=0&k=20&c=puLKYH_iuK79S2_s27PhINO7rhvN9pej7gGbbH429Fg=) which is much smaller than the size it is displayed at in your codepen. You can’t blow up a small image – it will look bad, or as you call it "distorted".

    The simple solution: use a larger image.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search