mobile background generate blocks

Hi there,

GenerateBlocks Pro has Advanced Backgrounds which have full responsive controls, including different images for different devices.

In the free version you would need to add some CSS. Begin by selecting the Container Block you want to change the image for. In its Settings > Advanced > Additional CSS Class(es) add a custom class eg. no-mobile-background

Then add this CSS to remove the image, and swap the background color if required:

@media(max-width: 768px) {
  .gb-container.no-mobile-background,
  .gb-container.no-mobile-background:before {
    background-image: none;
    background-color: #000; /* Optional background color */
  }
}

If you want a different image, then you would need to give the block a CSS class for adding a specific image eg. mobile-hero-image

@media(max-width: 768px) {
  .gb-container.mobile-hero-image,
  .gb-container.mobile-hero-image:before {
    background-image: url('the_full_url_for_your_mobile_image');
    background-size: cover; /* set background sizing */
    background-attachment: initial; /* Remove fixed background if present */
  }
}

Hey David,

Thank you so much for your help! I used the first option for the smaller blocks and it works like a charm.
For the full background image I used the second option with a smaller version of the full picture, but it still looks weird. I tried switching the size from cover to contain, but then it only looks good on the first block. Are there any other options here?

Thank you!

Hi there,

You may need to play with different “size” options to find the right one. You can find them here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

The result will largely depend on the aspect ratio of the image.

Hi Tom,
Thank you! I changed the background from the block to the body, and now it works! Just one more question, is there a way to use a semi-transparent color for the Optional background color (@media(max-width: 768px) {
.gb-container.no-mobile-background,
.gb-container.no-mobile-background:before {
background-image: none;
background-color: #000; /* Optional background color */
}
}

Thank you!

You can use a RGBA value for your background eg.

background-color: rgba(0,0,0,0.5);

That example is a black background set to 50% (0.5) opacity.

You can use any RGB color value you like for the first 3 units, followed by the alpha ( opacity ) value.

Thank you so much, David. That works really well!
All problems solved ??

You’re welcome

Hi, this is Eva again. I successfully used the given options to change backgrounds. Now I am trying this for another web site, but I can’t get it working. Would it be possible for you to take a look? I only want to change the background of the last block for mobile…
How can I send you the link?

Thank you!
Eva

Hi Eva,

You can send the details here – https://generateblocks.com/support/

While waiting:

If your site is using a caching plugin, can you try purging/clearing plugin’s cache and the browser’s cache and check again to see if it finally applies?

Thank you! I cleared the browser’s cache on my cell phone and tried it, no luck… Now I am waiting for my account at gererateblocks.com/support to be approved ??
Thank you so far!

You can use the form on the link provided (pre-sale tab) – https://share.getcloudapp.com/7Kuo0NGl – so you won’t need to register. ??

Hey!
I already registered ans posted my question again ??
Thanks!

Hi!
I manages to solve my problem! Like this:
`@media(max-width: 768px) {
.gb-container.mobile-hero-image,
.gb-container.mobile-hero-image:before {
background-image: url(‘the_full_url_for_your_mobile_image’);
background-size: contain;
background-repeat: no-repeat;/* set background sizing */
/* Remove fixed background if present */
background-color: #829D93;
}
}
And now it looks exactly like I wanted ??

Best!
Eva

Awesome, thanks for letting us know! ??