-2

I want to set some background image size using CSS.

I am able to set the size using the below css codes. I have been reading up on css formatting at w3schools, and also referred to the below stackoverflow post:

background: url([[pix:theme|cat/default]]) no-repeat center bottom; 
background-size: 180px 200px;

I have tried all the methods, including contain and cover. However i keep getting the image stretched and blurred. How can I do this without blurring the image? FYI original image size is 128Kb 1210x1643px

Improve this question
4
  • Share your code please. @ktiwari Commented Sep 3, 2019 at 12:43
  • 1
    How do you expect to resize the image without stretching (or squashing) it? Commented Sep 3, 2019 at 12:43
  • 1210 x 1643 and 180 x 200 do not have the same aspect ratio so of course the image will be stretched. 180 x 244 would be closer. Commented Sep 3, 2019 at 12:58
  • isn't 1210x1643 more pixelated than 180x200 and have better view of the image? What would your suggestion be on the sizing to get clearer image? Commented Sep 3, 2019 at 22:44

1 Answer 1

Reset to default
0

Sooo,

You cannot stretch the image without bluring or loosing quality. I recommend you to have a high quality image and put the image in a kinda matching background-colored div.

Then you can use either media-quires or some JavaScript to keep the image as big as possible.

Also it would be helpful to see some of your code, or have a better description what you are trying to do. :)

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

this is my code for the image: background: url([[pix:theme|cat/default]]) no-repeat center bottom; background-size: 180px 200px; with the background-size, i tried percentage, contain & cover parameters but image is appears still blurred
What do you exactly want to achieve?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.