Home Forums Exoplanet Pro Single background image for whole page including header?

This topic contains 6 replies, has 2 voices, and was last updated by  Motoman 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #5073

    Motoman
    Participant

    Is there a way to have just a background image that shows top to bottom on the page, as opposed to having something different in the header area?  I’d like the header area to just be transparent and have the background image visible throughout.

    #5074

    Andy
    Keymaster

    Hello

    Yes, the header area can be made transparent so the background image will show through.

    In the customizer, go to ‘Header and Menu Styling’ and in the setting for ‘Header Background Color’ slide the transparency setting all the way to the left to 0 (zero).
    Setting this to zero will make the header transparent across the whole site.

    If you want a transparent header only on the homepage, set your preferred background color (for the whole of your site) as above, and then add this CSS to ‘Additional CSS’:

    .home #masthead{
    background: transparent;
    }
    #5075

    Motoman
    Participant

    Thanks for that…actually, I’d want it to be as it is on the home page, but transparent everywhere else…could I do that?

    #5076

    Andy
    Keymaster

    In that case, set it to zero, and then for the homepage change the transparent part of the Additional CSS code for any color you like.

    The color can be hexadecimal, rgb or rgba, for example #ff0000, rgb(255,0,0) or rgba(255,0,0,1)

    in the rgba example the 1 at the end controls the transparency (0 is fully transparent and 1 is no transparency, so 0.5 would be half transparent).

    #5077

    Motoman
    Participant

    Thanks, that seems to be pretty close…but where the header was on non-home pages it shows as a gray bar now…doesn’t show the background image through…?

    • This reply was modified 2 weeks ago by  Motoman.
    #5079

    Andy
    Keymaster

    Ahh yes I see what you mean now.
    I initially assumed it was the homepage image that you wanted to show through, but I can now see it is the body background image that you need to show through the site header.

    To make this so, add this code to Additional CSS:

    .main-header{
        background: transparent;
    }
    #5080

    Motoman
    Participant

    That did it – thank you!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.