Background of Header Area

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

@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);
}

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.

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;
}

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…

This should get you most of the way there.

#page {
    background: transparent;
}
#main {
    background: #FBFBFB;
}
footer {
    background: #FBFBFB;
}
nav {
    background: #FBFBFB;
}

@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.

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!

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.

Yay! Worked great @dmbarber. Thanks so much!

@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;
}