How to Remove Background Images on Mobile

September 30, 2021

 

In this video I’m going to show you how to remove a background image only on mobile devices.

By default Elementor doesn’t give you an option to toggle the use of background images per device.

This trick can be helpful if you need to change the look of your website on mobile devices or in my use case I wanted to remove a background image because it helped with my mobile page performance and gave me a boost in loading times.

The great thing about this trick is it’s just 1 line of CSS code and be used on either Elementor Pro or the free version of Elementor.

Elementor Pro Code:
@media (max-width: 767px) {selector { background-image:none!important;background-color: #5D9CC5;}}

Elementor Free Code:
@media (max-width: 767px) {.mobilebg { background-image:none!important;background-color: #5D9CC5;}}

Timestamps:

  • 0:00 Introduction
  • 1:43 Elementor Pro Example
  • 4:50 Elementor Free Example

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

Share this post:

Facebook
Reddit
Twitter
Pinterest
LinkedIn
Email

More Free Resources

Join Our Community

Wicky Design YouTube

Get our latest videos by subscribing for FREE to our YouTube channel. New videos are uploaded weekly!