XF 1.2 Hiding header background via css?

[Divvens]

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?

 

[Paul B]

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]

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.

 

[Divvens]

@Brogan - http://orojackson.com/forums/
Please go to the style chooser and select "Heavenly Demon" OR - http://orojackson.com/misc/style?st...d4fb3f668bd0db42bf3d7da173f&redirect=/forums/

 

[Paul B]

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]

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]

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

I'm using

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