ProBeaver Weekly
Weekly for all things Beaver

Change row background image to color for Mobile layout in Beaver Builder

One can add background image in different orientations to any row in the Beaver Builder plugin. While background image on a row looks amazing in full desktop view, it may look little out of the place for smaller screen devices.


So, what is the fix?
How about switching background image with background color of smaller screen device layout?

Background image to color on smaller screen devices

1. Click “wrench” icon to open “Row Settings”.


2. Go to “Advanced” tab and then add unique class to this row (For example pro-row-bg-1) and click the “Save” button.


3. At top right, go to: Tools > Layout CSS / Javascript and add following code in the box.

4. This will replace background image with background color for smaller screen mobile device users.

Davinder Singh Kainth

About Davinder Singh Kainth

Davinder loves creating and implementing online spaces. He has over a decade of experience reaching corners of: design, development, blogging and SEO. He also create products at SimpleProThemes(.com), WordPress learning at BasicWP(.com) & digital solutions at iGuiding(.com)


  1. Dave on July 28, 2016 at 2:24 pm

    Thanks, Davinder, even an old dummy like me can understand this. You Rock!

  2. Edward Morgan on July 28, 2016 at 5:18 pm

    Thanks will be using this

  3. Paul Pyle on August 6, 2016 at 2:16 am

    Thank you Davinder for teaching me new tricks!

  4. Vin on March 19, 2018 at 3:56 am

    Your comment is awaiting moderation.

    I see this is old article wondering if it still applies 🙂


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Become a Beaver Builder Expert

Pre-order "Mastering Beaver Builder" course