[Resolved] how to make the image show through?

[sparkle]

hi,

our design has a gradient background with a logo over it that shows through the menu and the sidebar. i’ve almost accomplished this by assigning the gradient to the body and the image to the header, but the overflow is only peeking through where the content is.

any suggestions on getting the image to be on top?

[Tom]

Hi there,

You’re using this CSS:

header {
    background-image: url(yoursite.com/HOUSALogoNoDatetrans.png);
    background-repeat: no-repeat;
    background-attachment: fixed!important;
    overflow: visible;
    background-position: left top;
    background-position-y: 3em;
    position: absolute;
    background-size: 40%;
}

That’s targeting every single header HTML element.

If you want to target the site header only, use this selector: .site-header

[sparkle]

ok, that changed it, but not satisfactorily. what i really want is the whole logo to show through on the .site-content or page div. i’ve created a bit of space above the left sidebar where the ‘eye of the logo should show through. is it possible?

[Tom]

Right now the logo is applied to the site header element, but that element stops at the navigation bar.

If you want it to extend into the page, you would need to set it as the body background, then remove any backgrounds from the header and page.

[sparkle]

ah! thank you. that makes sense and looks awesome. i’m turning into a generatepress fangirl. thanks!

[Tom]

You’re welcome! Glad I could help 🙂

[Author]

Posts