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

Divvens

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

Brogan

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

Divvens

Well-known member
#3
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?
I'm developing the style locally, I'll upload it in a bit on my live site and provide you the link.
 

Brogan

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

Divvens

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

Divvens

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

Mouth

Well-known member
#8
I'm using

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