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

XF 1.2 Hiding header background via css?

Discussion in 'XenForo Questions and Support' started by Divvens, Mar 3, 2014.

  1. Divvens

    Divvens Well-Known Member

    So, I'm trying to change CSS to remove #header background for a smaller device width using:

    @media (max-width:@maxResponsiveNarrowWidth) { #header { background-image: none !important; } }

    But it seems to not take any effect and the header background image remains, is my css approach wrong?
  2. Brogan

    Brogan XenForo Moderator Staff Member

    It should work.
    I just tested it using color instead of image and it changes the colour as expected.

    What is the link to your site?
  3. Divvens

    Divvens Well-Known Member

    I'm developing the style locally, I'll upload it in a bit on my live site and provide you the link.
  4. Divvens

    Divvens Well-Known Member

  5. Brogan

    Brogan XenForo Moderator Staff Member

    It looks like you've got multiple images defined for the header area, e.g. #header and #headerMover #headerProxy.

    I can see two images when I shrink the browser width, with a small one overlaying a large one.
  6. Divvens

    Divvens Well-Known Member

    Yes, one is the "logo" while the other one is the header background. Using this modification to change the header logo -http://xenforo.com/community/resources/respollo.2016/

    As far as I am aware that doesn't play with the #header background, I'll take a look into it however. Even with the modification disabled the outcome is the same, the background-image is not being hidden via css rule.
  7. Divvens

    Divvens Well-Known Member

    After a bit of using dev tools on Chrome and disabling BG in most header items, this seems to work
    @media (max-width:@maxResponsiveNarrowWidth) { #headerMover #headerProxy { background-image: none !important; } #header { background-image: none !important; } }

    Now it's gone :D so it seems those 3 classes you stated all needed to have a bg-image none rule, I was trying to put them together at first but separating them as your post said worked. Thanks @Brogan
  8. Mouth

    Mouth Well-Known Member

    I'm using

    @media (max-width: @maxResponsiveWideWidth) {
    body {background-image: none !important; background-color:white;}

Share This Page