How to change an image property based on screen size?

Question

I am trying to change a background image size from "cover" to "contain" based on the screen size.

I currently have:

style="background-image: url('images/hbc/slider-3.webp'); background-size: cover;"

I want to change it to background-size: contain; for phones only.

I have tried everything I thought might make sense.

Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — esqew, Aug 27 '23 at 16:59

score 2 · Accepted Answer · edited Aug 29 '23 at 13:52

2

If you have now

.block-img{
    background-image: url('images/hbc/slider-3.webp'); 
    background-size: cover;
}

you need

@media(max-width:768px){
    .block-img{
        background-size:contain;
    }
}

When the screen becomes less than 768 pixels (for phones), this block will change its property cover to contain.

edited Aug 29 '23 at 13:52

ahuemmer

answered Aug 27 '23 at 17:13

Johnny Money

1 Answers1