Header background image on mobile

[Spukje]

Hello,
I created a background image in the header using this custom CSS:

}
#header-section {
background: url(“http://quattrocycle-experience.nl/nieuw/wp-content/uploads/2014/02/QC_Header_achtergrond.png”) no-repeat center top !important;
}
.mobile-header.section #background {
display: no-repeat left top !important;
}

As the image was getting behind the logo in the mobile version, I added the last sentence. Probably it is not correct, because it is not working.

See for the website I am working on: http://quattrocycle-experience.nl/nieuw
Thanks for your help.

At the mobile version strangely enough also the footer text with the copyright etc appears underneath the header.

Kind regards, Sjoukje

[Mohammad – SUPPORT]

Hi,
First this is wrong code
.mobile-header.section #background {
display: no-repeat left top !important;
}
RIGHT CODE
.mobile-header.section {
background : none;
}
Please explain issue with screenshot so i can give quick solution .

Thanks

[Spukje]

Hi,
Thanks for you answer. Unfortunately still have the same problem. In the attachment you can see in the mobile version the background image is interfering with the logo.

regards, Sjoukje

[Mohammad – SUPPORT]

Hi,
I got it so what do you want hide header background for mobile ?

Thanks

[Spukje]

Hi, if possible than let it align left, or otherwise hide it for mobile.

attached you also see the problem with the footer repeating under the header…

Sjoukje

[Mohammad – SUPPORT]

Hi,
Please go to Admin -> Theme Options -> Custom CSS => Here put this code and update options

@media only screen and (max-width: 767px) {
#header-section{background:none;}
.header-advert{display:none;}
}

With Best Regards
Swift Ideas

[Spukje]

Hi,
sorry, I don’t understand you. Do you mean ‘admin’ within the WordPress area?? I was putting the first CSS lines as mentioned above in the Styles.css file. But apparently I need a Custom.css file?? I can’t find it in the directory.

regards, Sjoukje

[Spukje]

In the mean time I found the custom.css file in the directory, have put in the code as mentioned by you, but it still isn’t working. At the top of the custom.css file is mentioned:

/*
*
* Don’t forget to set custom_css to true in the defaults.php file!
*
*/

but I cannot find how to set it to true in the defaults.php. file.

regards, Sjoukje

[Spukje]

Hi,
Still searching for a sallution. In topic #37545 If read this.

Also, you can take a look at Twitter Bootstrap and use their helper classes. For example, adding the class ‘visible-lg’ on an element will make it show up only on large screens (desktops)

Since I want the image only to disappera at small devices I tried this: .hidden-xs

So I put into style.css this code:

}
#header-section {
background: url(“http://quattrocycle-experience.nl/nieuw/wp-content/uploads/2014/02/QC_Header_achtergrond.png”) no-repeat center top .hidden-xs !important;
}

But than it was gone on all the devices.

So I also tried:

}
#header-section {
background: url(“http://quattrocycle-experience.nl/nieuw/wp-content/uploads/2014/02/QC_Header_achtergrond.png”) no-repeat center top !important;
}
.mobile-header.section {
background: .hidden-xs;
}

But that didn’t work either.

Probably I put it in the wrong place…

regards, Sjoukje

[Mohammad – SUPPORT]

Hi,

Please go to WordPress Admin Dashboard -> Theme Options -> Custom CSS => Here put this code and update options . I have attached screenshot and it should work 100% .

@media only screen and (max-width: 767px) {
#header-section{background:none;}
.header-advert{display:none;}
}

Thanks

[Spukje]

This reply has been marked as private.

[Spukje]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Sorry my mistake . It should be at Admin -> Theme Options -> General -> Custom CSS .

Thanks

[Mohammad – SUPPORT]

Hi,
Let me know your feedback and waiting for your reply .
Thanks

[Spukje]

This reply has been marked as private.