Transparent Header

[fixers]

Hi

On my home page – Id like to have a pattern as the background of my header, I have achieved this using the below css:

#header-section.header-4 #header, #header-section.header-5 #header {
background-image: url(“http://localhost:8888/wp-content/uploads/2015/03/Pattern-02a-copy.jpg”);
}

Looks great!!

My issue is on some of my other pages, these are set up with full screen sliders at the top and require a transparent header – this worked fine prior to adding the background is there a tweak I can make to the css to remove the background image when the header is to be displayed as transparent?

[Rui Guerreiro – SUPPORT]

Hi,

Can you take a screenshot of the issue?

Without your site being online can be complicated to find a solution, in that case we will have to wait until it’s online.

-Rui

[fixers]

Hi Rui

Attached, Im not sure its that difficult – ive essentially used css to add a background image to the header, on pages where the header is set to show as transparent its not showing as transparent now- i need to modify the css to make this happen?

Screen shot attaced. You can see the header background is showing over the page where it should be transparent?

[Rui Guerreiro – SUPPORT]

There was an error with your image upload. Try to share it in Dropbox link or something similar.

-Rui

[fixers]

Attached again?

[fixers]

3rd time lucky, attached now 🙂

As you can see the header is not showing as transparent when i have added an image as a background, is there a way to use css to hide the image on specific pages….

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

So this situation happens only a few places where you are using the RevSlider. We will have to inspect the pages when you have the site online to provide a specific css for those pages in order to don’t show any background in those situations.

Would be something like this

.page-id-6575 #header-section.header-4 #header, .page-id-6575 #header-section.header-5 #header {
background-image: none!important;
}

You can grab the page id by inspecting the code and check in the body css classes.
If you can’t make it, we will check this when you have the site online.

This image was taken from our demo site
https://www.dropbox.com/s/ezuap65asqi3wld/body_class.png?dl=0

-Rui