BB Theme - Link Header Background Image to Homepage and Make Responsive

I have someone who wants to use the BB theme for a blog, and wants the header area to have a background image, in the Modern preset, which is boxed. I need that image to be responsive.

They also want the header image to be linked back to the blog home page. That’s easy to do with a logo, since it does that by default. But how is that accomplished with a background image?

I was thinking of using this for the styling, but not sure if that’s the best way:

.fl-page-header-container {
width: auto;
height: 175px;
padding: 0px;

}

@media only screen and (max-width: 768px) {
.fl-page-header-container {
width: 100%;
height: auto;
background-size: 100% auto !important;
}
}

Thanks,

Dairrell

Hi Dairrell,

What kind of background are we trying to apply here? Because if it’s a wide enough image you can just make that into a logo and set the header layout to nav centered and the logo should cover the entire header and it will be linked to the home page. Does that sound good?

Jun

Hi Jun,

Thanks. I did try that, but the logo does not fit the whole area. Since it’s a boxed layout, I have a header area of 1100x175px. I thought as a logo, it would fit the entire area using the centered nav layout, but that didn’t work for me. Do I need to fix that with CSS?

Dairrell

Hi Dairrell,

If you understand correctly, the topic I replied to yesterday should resolve your issue.

Thanks,
Danny

I’m getting there. But I’ve got about 30 pixels of white space on the left and right side. The theme is 1100px wide, and so is the header graphic. I’m using this CSS as recommended in the above thread:

/** To resize the logo larger- change values if needed **/

@media (min-width: 1100px) {
/* Change width of the logo container /
.fl-page-header-primary .row > div:first-child {
width: 100%;
}
/
Change width of the nav container (or the social icons area) */
.fl-page-header-primary .row > div:last-child {
width: 100%;
}
}

I figure I’m missing something simple, but it’s eluding me today. Here’s the site:

http://www.shirleycaldwellblog.com

Thanks,

Dairrell

I think I have this figured out now. This seems to work and allows the header image to reduce properly for tablets and mobile:

.fl-page-header-container {
display: block;
width: 100%;
height: auto;
padding: 0px;

}

One other thing, in a “duh” moment, I neglected to allow for paddings when determining the width of the actual image.

Dairrell

Hi Dairrell,

Is your issue now resolved?

Thanks,
Danny

Yes it is. Thanks.

Dairrell

Awesome and thanks for informing us, we appreciate it.

Thanks,
Danny