WordPress.org

Forums

Leaf
Background of Header Area (12 posts)

  1. srpapas
    Member
    Posted 1 year ago #

    I'd like to make the background behind the logo area to be transparent. Right now, it is white.

    socialcorrespondence.com

    I'd like the blue wood background to show up behind the whole logo header area.

  2. Nhat
    Member
    Posted 1 year ago #

    Hi,

    That's not possible with the current header image because it is large enough to covering everything. Here's what your current header image look like: [link].

    You're going to have to change your header image if you wish to do that.

    Nhat

  3. tizz
    Member
    Posted 1 year ago #

    @srpapas, as @Nhat said, you have to change your image in .png if you want the transparency.
    Now you can only have an header background with the same color as the background page:
    .site-header img, .header-group.six.columns {
    background-color: rgb(82, 99, 115);
    }

  4. srpapas
    Member
    Posted 1 year ago #

    Hi @tizz and @Nhat, my image is a png with a transparent background. I was wondering how to make the header background transparent using css by either setting the background to not display or giving it a transparent setting.

    I tried this:
    .site-header img, .header-group.six.columns {
    background-color: transparent;
    }

    But no luck.

  5. Dennis Barber
    Member
    Posted 1 year ago #

    You are on the right track srpapas. However, you have the wrong identifier in your css. You are currently pointing at the IMG and a header group with class six and columns. You need to identify your actual header class (most likely .header). It should look more like:

    .header {
        background-color: transparent;
    }
  6. srpapas
    Member
    Posted 1 year ago #

    Thank you @DMBarber. Unfortunately, that didn't work. It looks like the theme css defines the background for the entire page in one css element instead of separating it into different elements. I guess I'll just have to add a background behind the image. Kind of ruins the effect I was going for...

  7. batharoy
    Member
    Posted 1 year ago #

    This should get you most of the way there.

    #page {
        background: transparent;
    }
    #main {
        background: #FBFBFB;
    }
    footer {
        background: #FBFBFB;
    }
    nav {
        background: #FBFBFB;
    }
  8. tizz
    Member
    Posted 1 year ago #

    @srpapas you're right, I hadn't seen that it's a .png.
    First, that bluewood bg image is no good because it creates a white line where the image is repeated to fit the screen, so even if you could make the transparent header you would see that white line cross through it. You can see it even right now, in the right top border (if you have admin bar, try to logout).
    So if you want that background you should fix and manage it in a way plain visible to all screens, bearing in mind that now is already very heavy to load.
    IMO, you should choose a solid color background, easy to do via admin, and this is better for your loading time too, then you can use the same color for the background of your image.

    @batharoy, Selectors must be grouped. And white is a color, so isn't what @srpapas wants.

  9. srpapas
    Member
    Posted 1 year ago #

    Wow @batharoy - that seemed to work! Thank you so much!

    There seems to be a gap between the site content and the footer - and a small border between the header and the site content. Not sure how to remedy those but I'm 90% happy with it so.... If you have an idea, please let me know.

    @tizz, I hear what you are saying. You are probably right that I'd get a similar effect by just adding the background to the header image.

    Thank you both!

  10. Dennis Barber
    Member
    Posted 1 year ago #

    To fix your gaps add these two lines to you stylesheet:

    body {
    line-height: 0;
    }
    .site-footer {
    margin: 0;
    }

    In Chrome developer tools, that did the trick on your site.

  11. srpapas
    Member
    Posted 1 year ago #

    Yay! Worked great @DMBarber. Thanks so much!

  12. batharoy
    Member
    Posted 1 year ago #

    @srpapas

    and a small border between the header

    I think you mean the blue line between the header image and the menu, if so add a negative value:

    .site-navigation.main-navigation {
        margin-top: -2px;
    }

    And for the footer @DMBarber has it almost right, we only want it to affect the top margin:

    .site-footer {
        margin-top: 0;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic