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

Discussion in 'Styling and Customization Questions' started by Peace, Oct 23, 2013.

  1. Peace

    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!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. Peace

    Peace Active Member

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

    Brogan XenForo Moderator Staff Member

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

    Peace Active Member

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

    Peace Active Member

    nevermind, got it with

    html { background-color }

    thanks again!
     
  7. Jeremy

    Jeremy XenForo Moderator Staff Member

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

    russoroni Active Member

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

    Jeremy XenForo Moderator Staff Member

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

    russoroni Active Member

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

    Jeremy XenForo Moderator Staff Member

    What is the link to your site?
     
  12. russoroni

    russoroni Active Member

    trailpeople.org
     
  13. russoroni

    russoroni Active Member

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

    Jeremy XenForo Moderator Staff Member

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

    russoroni Active Member

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

    russoroni Active Member

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

    russoroni Active Member

    Ok. Its working perfectly. Thanks a bunch @Jeremy
     
  18. Andrew

    Andrew Well-Known Member

    Hi russoroni,

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

    Thank you sir!
     
  19. russoroni

    russoroni Active Member


    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>
     
    Andrew likes this.
  20. russoroni

    russoroni Active Member

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

    In case you were wondering
     
    Andrew likes this.

Share This Page