Different Background Mobile vs Desktop

Support
#1

Hi,

I was wondering if there’s a way to use a different section background image on desktop and mobile. I want a horizontal one for desktop and a vertical for mobile. Is there a way to do that?

Thank you!

#2

Hello There,

Thanks for writing in! Regretfully the section background image will be displayed both in desktop and mobile screen devices. If you need to change the background image on smaller screens, you will have to do this:
1.) Please add a custom my-section ID in your section settings. You can find the ID field in the “Customize” tab

2.) And insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 979px){
  #my-section .x-bg-layer-lower-image {
    background-image: url(http://insert-your-new-image-url-here/) !important;
  }

  #my-section .x-bg-layer-upper-image {
    background-image: url(http://insert-your-new-image-url-here/) !important;;
  }
}

Please choose the lower or upper image in the code above depending on what you are using in your section settings.

Hope this helps.

1 Like
#3

Hi,

Thank you for the reply. I’m a bit lost as to how this works, though.
Will it use a different layer image depending on the width of the display?
If that’s the case, which image will be used above what width?

Thank you and Happy New Year!

#4

Hello There,

The provided code will override the section background image when viewed in smaller screens. It does use different layer. It simply replaces the desktop background image. The width or dimension of the background image will depend on the container width because by default it is set to cover the container.

I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

In Cornerstone, we use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this helps.

#5

Ah, I see. Thank you so much for the thorough explanation!

One last question. Is there a way to change the image based on the user’s orientation of the screen (horizontal vs. vertical)?

Thank you!

#6

Hey There,

Yes there is a way to change it. With the help of custom css again.
Please check this out for a better explanation:

Hope this helps.

#7

Ok, I’ll look it up. Thank you!

#8

You are most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.