how to make background image fit any screen size?

I have a background image (where the image is designed for desktop, 1920x1080 view) and I would like to make it responsive without making it blurry or some of the elements in the screen becomes non visible if I change to a smaller size screen.

My code:

<style>
     .background-image {
        background-image: url(/images/wip/coming-soon.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100vw 100vh;
        width: 100vw;
        height: 100vh;
    }
  
</style>

Is there a way to make it responsive, say if I switch to mobile view, it should be able to compress and fit the screen or do I need to use media query and change the background image to a different image(meant for mobile size) ?

martinbean

5 years ago

Level 80

@nickywan123 Don’t serve a 1920x1080 pixel image to mobiles. CSS isn’t going to automatically compress and resize images for different screen sizes; you’ll need to manually create different, optimised versions of your background image and serve the most appropriate one using media queries.

1 like

CookieMonster

5 years ago

Level 6

In other words, there is no workaround for my problem unless I get different images that serve laptops, smaller desktop, mobile,etc?

Please or to participate in this conversation.