Set background image size using CSS without stretching

Question

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

How do you expect to resize the image without stretching (or squashing) it? — Quentin, Sep 03 '19 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. — Turnip, Sep 03 '19 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? — ktiwari, Sep 03 '19 at 22:44

score 0 · Answer 1 · answered Sep 03 '19 at 13:12

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. :)

answered Sep 03 '19 at 13:12

Laczkó Örs

1,082
1
18
38

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 – ktiwari Sep 03 '19 at 22:40
What do you exactly want to achieve? – Laczkó Örs Sep 04 '19 at 14:15

Set background image size using CSS without stretching

1 Answers1