Site logo

Archived topic

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

3 replies · Started by Andy on December 12, 2020

Viewing posts 1–4 of 4

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

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 :)

Sounds good, thanks for the trick Leo.

No problem :)

This archived topic is closed to new replies.