XF 1.2 Hide Background Image based on Responsive Design

[Peace]

Using responsive design, is there a way to skip loading the background image for smaller screens? I have a big background image that loads for desktop browsers just fine (fills up any extra side margin space from our fixed-width design) but for mobile users, it's really just a waste of bandwidth since they never see it anyway (because there is no extra side margin space to view it).

So can I save mobile users a big image load by just disabling the HTML / Background image setting for small screens? If so, how can I accomplish this?

Thanks!

 

[Andrew]

Thank you sir, it worked perfect!

Note: If you found this thread via google, like I did, then this is the code you are looking for. @russoroni posted it, but I will include it with code quotes so you can copy it directly.

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth) {
    body {
        background-image: none !important;
    }
}
</xen:if>

Thanks again russoroni and everyone else who contributed this nifty piece of code.

Andrew

 

[russoroni]

No problem my man! If you're like me and find yourself building quite a complex website without being a professional programmer, then you made a really good choice by using Xenforo. These guys in here take the time to answer your questions no matter how inane they might be. It's an awesome community.

 

[Edpal]

<xen:if is="@enableRepsonsive">
@media (max-width:@maxResponsiveNarrowWidth) {
  body {
    background-image: none !important;
  }
}
</xen:if>

Add that into your EXTRA.css

You realize there is a typo there? "Repsonsive" sounds like Rapunzel's sister.

 

[Peace]

If anyone's still having trouble and searching through this thread, the following works in Extra.css with XF 1.5:

@media (max-width:mad:maxResponsiveNarrowWidth)
{
html {
background-image: none;
}
}