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!

 

[Paul B]

Use the responsive flag in a conditional statement: <xen:if is="@enableResponsive">

http://xenforo.com/community/resources/responsive-design.2193/

 

[Peace]

Hi @Brogan , this is what I had in EXTRA.css, and I'm not seeing a background image on desktop or mobile:

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

<xen:if is="@enableResponsive">
.body {
background-image: none;
}
</xen:if>

 

[Paul B]

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.

 

[Peace]

Thanks! I'd like to stick with one style - I think something is wrong with my CSS, because even

.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?

 

[Peace]

nevermind, got it with

html { background-color }

thanks again!

 

[Jeremy]

Hi @Brogan , this is what I had in EXTRA.css, and I'm not seeing a background image on desktop or mobile:

.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.

 

[russoroni]

So how do I hide the background image when responsive? Read this twice and tried the responsive flag stuff but its a no go.

 

[Jeremy]

What style property or class have you applied your background image to?

 

[russoroni]

What style property or class have you applied your background image to?

I added a link to the image in style properties/body/background

 

[Jeremy]

What is the link to your site?

 

[russoroni]

trailpeople.org

 

[russoroni]

lemme know if youre unable to access the homepage as I'm testing zbblock and it doesnt seem to like ip's from overseas.

 

[Jeremy]

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

Add that into your EXTRA.css

 

[russoroni]

The following templates contained errors and were not saved: EXTRA.css: 1) EXTRA.css - Line 31: Invalid condition expression

 

[russoroni]

ok I added this...

<xen:if is="@enableResponsive">
@media (max-widthmaxResponsiveNarrowWidth)
{
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.

 

[russoroni]

Ok. Its working perfectly. Thanks a bunch @Jeremy

 

[Andrew]

Ok. Its working perfectly. Thanks a bunch @Jeremy

Hi russoroni,

What was the final solution for this? I would like to do the same thing as well here.

Thank you sir!

 

[russoroni]

Hi russoroni,

What was the final solution for this? I would like to do the same thing as well here.

Thank you sir!

This is the code I am using in my extra.css for this:

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

 

[russoroni]

NOTE That little angry emoticon is a colon and the at symbol

In case you were wondering