[Resolved] How to make the background image scale with the size of the device?

[Andy]

Hi there,

On the homepage — first background image, under the menu. You’ll see wind mills.

When you resize the browser window, the image gets cut off.

How do I make the background image scale so the full image always shows? Similar to a slider plugin.

Thank you

[Leo]

Hi there,

Background images aren’t responsive by nature, unfortunately.

It simply wouldn’t work as you have the content on top and the image ratio changes drastically from desktop to mobile.

What if we use this CSS to change the position?

@media (max-width: 768px) {
    .gb-container.gb-container-a784eaa4:before {
        background-position: center;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andy]

Sounds good, thanks for the trick Leo.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts