How to correctly scale down the background image proportionally?

Question

Currently, I create a 1288x200 image (https://jstock.org/images/banner.png).

I want it to shown as 100px height banner. The reason I'm using 2x height, as I want it to look good in retina display.

As you can see in current outcome, it doesn't look good - https://jstock.org/

I try to change from

.banner {
    height: 100px;
    background: #3B3E44 url('images/banner.png');
}

to

.banner {
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background: #3B3E44 url('images/banner.png');
}

But, the outcome is still the same.

Can anyone provide me some hint, on how to scale down the background image proportionally?

Please include a [mcve]. You can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to do so. — Heretic Monkey, Apr 19 '19 at 19:53
Possible duplicate of [Resizing background-image always proportionally to scale with a center point](https://stackoverflow.com/questions/18323994/resizing-background-image-always-proportionally-to-scale-with-a-center-point) — Heretic Monkey, Apr 19 '19 at 19:54

Nisharg Shah · Accepted Answer · 2019-04-19T20:16:46.717

1

you set your background-size to contain so it contain your image in your height

.banner {
    height: 100px;
    background: #3B3E44 url("https://jstock.org/images/banner.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

<div class="banner"></div>

edited Apr 19 '19 at 20:16

answered Apr 19 '19 at 19:59

Nisharg Shah

16,638
10
62
73

Thanks so much! My mistake is I'm placing `background-repeat`, `background-size` and `background-position` before `background`. The order does matter? – Cheok Yan Cheng Apr 19 '19 at 20:01
But my testing shown that order does matter. Can you tested on your side, by moving `background: #3B3E44 url("https://jstock.org/images/banner.png");` to last? It seems that scaling will break. – Cheok Yan Cheng Apr 19 '19 at 20:10
order is matter when you add `background` css on that because `background` have own syntex, you can visit https://css-tricks.com/almanac/properties/b/background/ this link and clear your doubt – Nisharg Shah Apr 19 '19 at 20:13
when you use background-image, background-position, background-color then order is not matter – Nisharg Shah Apr 19 '19 at 20:14

How to correctly scale down the background image proportionally?

1 Answers1