Pro: display none background image on mobiles

Support
#1

In a past ticket I asked how to remove the background image for mobiles only and I was given css to simply make the background white

however this css didn’t stop the loading of the background image which cases the page to be slow on mobiles- so how do you make the background image not load on mobiles
http://staging1.kidsmagicworld.com.au/kids-magician/

#2

Hi @b960a518-a049-4215-9,

Thanks for reaching out.

The CSS will not able to stop the loading of an image especially the background is added by backstretch library. There is no other workaround other than CSS and code customization (PHP level detection of the device and prevent the code from execution). And customization is not something we can provide here, though, your site is loading fine and fast. The image is loaded about 400ms. How about reducing the image size?

Thanks!

#3

as an alternative- could I set the default background as white
and then use css to load in a background image?- would that work?

#4

Hi @b960a518-a049-4215-9

Basically you can assign a unique CSS class into your Cornerstone section.

Then you can load a background image only specific screen width or higher by adding custom CSS into the page’s CSS area.

Example:

@media(min-width:767px){
  .my-custom-background {
    background-image: url('http://path.to/image.jpg');
  }
}

Hope that helps.

#5

I think thats the only way to do it- thank you very much for the css

#6

You’re more than welcome, glad we could help.

Cheers!

#7

I am using PRO not cornerstone

where do I add the class my-custom-background?

#8

instead

see this page http://staging1.kidsmagicworld.com.au/zxxx/

the css you gave didn’t work so instead I used
@media(min-width:767px){
body {
background-image: url(‘http://staging1.kidsmagicworld.com.au/wp-content/uploads/2014/09/kids1.jpg’);
}
}
but how do I get it full width as on my PC it is not 100% of the screen (its tiled)

#9

got it- needed to add
background-attachment: fixed

to the css

this ticket is complete- thank you

#10

Glad you were able to figure it out :slight_smile:

#11

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