CODEWITHSUNDEEP
css
Cheok Yan Cheng
Cheok Yan Cheng

Reputation: 42670

How to correctly scale down the background image proportionally?

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/

enter image description here

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?

Upvotes: 0

Views: 54

Answers (1)

Nisharg Shah
Nisharg Shah

Reputation: 19532

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>

Upvotes: 1

Related Questions