[Resolved] Change background image in mobile view

[Christopher]

Hey guys,
the background image on my website looks good on desktop and tablet view, but in mobile I would like to resize the image and reposition it a bit as well, sadly I cant find the options for that in the editor. Size is set to “cover” and position to “center bottom” and image size is full – if I play around with these settings while being in the mobile view within gutenberg, I cant see any changes in the background image.

Any idea? Thanks!

[Ying]

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

[Christopher]

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?

[David]

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.

[Christopher]

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

[David]

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

[Christopher]

Thanks, I am now 😉

[David]

Glad to hear that!

[Author]

Posts