XF 1.2 Hide Background Image based on Responsive Design

Peace

Active member
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!
 
Hi @Brogan , this is what I had in EXTRA.css, and I'm not seeing a background image on desktop or mobile:

Code:
.body {
background-image: url('images/fall.jpg');
}

<xen:if is="@enableResponsive">
.body {
background-image: none;
}
</xen:if>
 
You need two styles, one responsive and one not - there is no "mobile" or "desktop" flag.
And having said that, if you have two styles you can just remove the background in the style.

Or you can use one style and remove the background below a certain browser width using a media query.
 
Thanks! I'd like to stick with one style - I think something is wrong with my CSS, because even

Code:
.body {
background-color: #000000;
}

Doesn't change the document background to black. (But this does work if I set it with the GUI in Style Properties -> General -> HTML). Is there a way to see exactly what Style Properties translate to as CSS?
 
Hi @Brogan , this is what I had in EXTRA.css, and I'm not seeing a background image on desktop or mobile:

Code:
.body {
background-image: url('images/fall.jpg');
}

<xen:if is="@enableResponsive">
.body {
background-image: none;
}
</xen:if>
This is invalid due to you not using media queries around it, @Brogan's resource on responsive have examples of the necessary media queries. Essecially, you just defined .body twice for every screen size, the second one taking precedence.
 
Code:
<xen:if is="@enableRepsonsive">
@media (max-width:@maxResponsiveNarrowWidth) {
  body {
    background-image: none !important;
  }
}
</xen:if>

Add that into your EXTRA.css
 
ok I added this...

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
body {
background-image: none !important;
}
}
</xen:if>
and it went through... however... I'm now having some other problem and need to figure it out before I can say if I resolved this.
 
Top Bottom