Learn exactly how to makeBETTER WEBSITES RIDICULOUSLY FAST

Get exclusive tips that'll help you master WordPress, Beaver Builder and lots more.

Replace Beaver Builder row Background images with a color on Mobile devices

A lot of the time when you design a website for you or your client, you’re (out of habit and rightly so) focused on making your design look good on desktop computers. But when you scale down that beautiful home page image with text over it onto a mobile phone, things can start looking a bit…wonky.

In this post we’ll show you how to fix this issue on mobile devices by replacing the background image on a row with a background color.

The problem is the image gets cropped on small devices

Firstly, let’s identify the problem. We create a new Beaver Builder row which takes up the full height of our browser window. It’s simple and the image does all the talking. We’ve spent years searching high and low for this image in our favourite stock library, or maybe we’ve been hassling our client for weeks, begging them even, to please send us an image we can work with.

And finally, we get the image. It’s beautiful.

replace-background-image-with-color-beaver-builder-desktop

But on mobile devices, the background image just doesn’t work.

replace-background-image-with-color-beaver-builder-mobile

No longer are the days where it is 50/50 as to whether the client will notice this issue. Mobile phones usage has surpassed desktop usage. We need to fix this! And fast! So we can get back to learning how to set up a Beaver Builder blog the right way!

Replacing the background image with a background color on mobile devices might be just the solution you’re looking for

Step 1: Launch the Page Builder

To replace the background image on the Beaver Builder row with a color, edit the page by launching the Page Builder.

replace-beaver-builder-row-background-image-with-color

Step 2: Add a background color to the row

While in the Page Builder editing the page, edit the row you want to remove the background image on and set a background color.

To do this, under Background> Type select Photo, as shown below.

Once you select Type: Photo you can add your background image AND you can also set a background color further down the page, like in the below screenshot where I have added the background image of the girl, but then also set a green background color.

replace-background-image-with-color-beaver-builder-mobile-add-bg-color

To explain this further, in CSS when you set a background image AND color on the same element, the image actually sits ON TOP of the background color. So the background color is always applied, but the image sits on top of the background color so you just don’t see it. Think of one layer on top of another. Like mums lasagne!

TIP! You should always set a background color when also setting a background image, just in the off chance the person viewing your website has set their browser set to not download images. Although unlikely, it can still happen!

Step 3: Add a CSS class to the Beaver Builder row

While in the Page Builder editing the page, edit the row you want to remove the background image on, then click on the Advanced tab and add a CSS class in the CSS Selectors > Class text field, as per below.

To make this tutorial easy, we suggest you add the CSS class bg-color-mobile to the row, like we have done below.

replace-background-image-with-color-beaver-builder-mobile-css-class

Step 4: Add the necessary CSS to hide the row background image on mobile devices

Building on what we learnt above, as the background image sits over the top of the background color, if we remove the background image then the background color underneath will show.

That’s what we’re about to do – the magic!

Add this CSS into your style.css file in your theme, or wherever else you prefer to add your CSS code.

View the row on a mobile device and you’ll see that the background image now hides itself and the underlying background color shows through, making your content easy-to-read and your website not look like an accident.

replace-background-image-with-color-beaver-builder-mobile-hide-bg-on-mobile

Magic!

And this isn’t Harry Potter. You’ve now got the ability to hide Beaver builder row background images on small devices whenever you want!

Share your examples in the comments below

We’d love for you to showcase where you use this technique. As Beyonders, we all value inspiration, and above all, how cool would it be if you inspired someone else with your work!

Share in the comments below and inspire today!

2 Comments

  1. bluedognz on August 10, 2016 at 9:24 pm

    Great post Grant! How would I do this on this website, it’s using an image slideshow as a background and the powerpack addon to give an angled transparent overlay which doesn’t display correctly on a mobile. Thanks! http://wordpress-21494-50647-139663.cloudwaysapps.com/

    • Beyonder #1 on August 11, 2016 at 12:50 am

      Hi mate! You can add the following CSS to your style.css and that should work! It’ll change for portrait tablets and down. Nice website BTW!
      @media (max-width: 768px) {
      .fl-row-bg-slideshow > .fl-row-content-wrap:after { background: rgba(0, 0, 0, 0.8) !important; }
      }

Leave a Comment

You must be logged in to post a comment.