Responsive full background Image (css)

I’m having some issues with my background image. I have a full background image in my website, and I want a responsive website, but when I try to see it on my phone, the image height is not correct.

what resolutions should I have in the background image to fit all devices? I want to have a background image that occupies the entire screen, even at diferent heights.

I already have media queries, but i don’t know the resolutions I need

Welcome, Jojo.

In general, I set the height property of images to some ratio of the vh value. However, this might not be the best, if your webpage is meant to be scroll-able.

Without seeing your code/design, I cannot help much more.

Hope this helps.

1 Like

This is my Background image:


And this is what I want for when the website is viewed on mobile phone.

I want a responsive website, but I don´t know the resolutions that I need…

I think What you need is to create art direction for your responsive images.
This articles can help you:

1 Like