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.


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


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.


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.


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.


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.



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!

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

2 thoughts on “Replace Beaver Builder row Background images with a color on Mobile devices”

    1. 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 Reply to bluedognz Cancel Reply

Your email address will not be published. Required fields are marked *

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top