Change background image in mobile view

Hi Christopher,

The advanced background is a feature of GenerateBlocks pro, if you have GB pro, you can choose different images/positions/size etc for different devices.

If you don't have GB pro, you can try this CSS:

@media (max-width: 768px) {
    .gb-container.gb-container-b8cfbc6e:before {
        background-size: cover;
        background-position: left center;
        background-image: URL(HTTP://.....);
    }
}

You can adjust the background size, position, and change to another bg image (replace the HTTP://..... with your image url).

Thanks! One more question on the same topic. Whenever I change my logo within the Mobile view to a smaller size, it also changes it to a smaller size on the Desktop view. Shouldnt those settings be separate and only apply to mobile in this case?

Hi there,

no, the Logo in Site Identity has no responsive settings.
Options:

1. Use the Mobile Header to add a separate mobile logo - probably not a good option for your design.

2. Use this CSS:

@media(max-width: 768px) {
    #masthead .header-image {
        width: 150px;
    }
}

Option 2 is the most fitting for your design.

Thanks David.

Just to clarify, its not the site identity logo but rather an image that I inserted within the page editor via Image Block. When I change that Image block and have it 50% size in desktop and 25% in mobile view for example, it also uses 25% in the desktop view

Are you using the GB Image Block ? As that has responsive controls. The core Image Block doesn't.

Thanks, I am now ;)

Glad to hear that!