Support » Plugin: Elementor Website Builder » Set a different background image for mobile device

  • Resolved anikay


    Dear friends,

    after some anchor issue and no real solution, I changed my strategy 🙂
    How can I set a different background-Image for mobile view in free elementor. I’ve tried tweo complete different sections for my one-pager, but i couldn’t work out the menu and anchors.
    Now I simply want a black background for max-width: 480px.
    I’m fine with either an elementor way or with CSS via Costumizer.


    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Ben Pines


    Duplicate the section, and make one of them hidden for mobile, the other hidden for desktop and tablet. This way, you can set two different backgrounds

    Thank you Ben, that is an excellent solution and it works fine. I’d never got that idea
    Problem solved. 🙂

    Actually this will only hide the image by css, but it will still be downloaded on mobile and use bandwith. Especially for carousels this can eat up a lot of mb’s.

    @benpines is there an element available that lets us set a background image, where we can use media queries to influence the url based on screen size, or (preferably) a back-end solution that checks device meta data and serves a different image based on that?

    Anyone who’s reading this, I’m now using the Adaptive Images plugin to serve different image sizes depending on screen size.



    Ben how do you do that mate? I’m using a template in elementor. I cant see an option to duplicate and make it visible for phone or desktop.

    cheers This plugin can do it for you. Responsive Background Image, Responsive Background Color.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Set a different background image for mobile device’ is closed to new replies.