Full Width Homepage Background Image with Transparent Header

  • Resolved dukearmi

    (@dukearmi)


    6 months, 2 weeks ago

    Hello!

    I’m using this code to display a full width background image with a transparent header.

    .page-id-123 .site-header {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    background-color: transparent;
}

    It works great, but I’m also using a full width and full height (100%vh) to display text and hero image. Using this code, the container gets pushed upwards and it’s no longer vertically centered.

    Now I was able to fix it by adding padding to the container (and changing the amout of padding based on the screen size), but is there a better way to do it?

Viewing 9 replies - 1 through 9 (of 9 total)
  • ying

    (@yingscarlett)

    Hi there,

    Can you link us to your site to see the issue? Although I don’t think the code will create this issue.

    Thread Starter dukearmi

    (@dukearmi)

    Hi and thank you for the quick reply,

    it’s https://www.aviamonde.com/

    I wonder if I can also make the navigation menu transparent and display the background image.

    ying

    (@yingscarlett)

    The homepage does not have this CSS applied, as the CSS is targeting page with id 123.

    If you apply the CSS to homepage site header, the issue should not occur.

    Thread Starter dukearmi

    (@dukearmi)

    I just applied it. Please check. Everything looks good but the main container is pushed upwards (I suspect by as many pixels as the height of the site header). I think it’s behaving as expected with the code I’m using, but I’m ooking to vertically center the container again.

    ying

    (@yingscarlett)

    The content is centerd if you remove the uneven paddings (top:140px, bottom:40px) that’re added to the container.

    Check the screenshot, the 2 red lines are the same length:

    https://app.screencast.com/HExzo64ocWUap

    Thread Starter dukearmi

    (@dukearmi)

    You’re right. This is fixed. Thanks!

    The only issue is with the menu transperancy on tablet on mobile. Is there a way to make the navigation transperant on desktops only?

    I made the nav menu transparent by deselecting the ‘intial color’ in the Customizer>Color>Primary Navigation>Navigation Background.

    Alvind

    (@alvindcaesar)

    Hi there,

    You can use this CSS to apply the background color only on mobile:

    @media only screen and (max-width: 767px) {
  .inside-header {
    background-color: red;
  }
}

    Just replace the color with your preference.

    Thread Starter dukearmi

    (@dukearmi)

    Thank you, Alvind!

    Alvind

    (@alvindcaesar)

    You’re welcome!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Full Width Homepage Background Image with Transparent Header’ is closed to new replies.