• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Hide Background Image based on Responsive Design

Peace

Active member
#1
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!
 

Peace

Active member
#3
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>
 

Brogan

XenForo moderator
Staff member
#4
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

Active member
#5
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?
 

Jeremy

Well-known member
#7
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.
 

Jeremy

Well-known member
#14
Code:
<xen:if is="@enableRepsonsive">
@media (max-width:@maxResponsiveNarrowWidth) {
  body {
    background-image: none !important;
  }
}
</xen:if>
Add that into your EXTRA.css
 

russoroni

Active member
#16
ok I added this...

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

russoroni

Active member
#19
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-width:mad:maxResponsiveNarrowWidth)
{
body {
background-image: none !important;
}
}
</xen:if>