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

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Beaver Builder Theme / BB Theme – Link Header Background Image to Homepage and Make Responsive

This topic is: resolved
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #113717

    Dairrell
    Participant

    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

    #113869

    Jun
    Keymaster

    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

    #113918

    Dairrell
    Participant

    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

    #114163

    Danny
    Keymaster

    Hi Dairrell,

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

    http://forum.wpbeaverbuilder.com/support/q/full-width-logo/

    Thanks,
    Danny

    #114230

    Dairrell
    Participant

    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

    #114258

    Dairrell
    Participant

    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

    #114663

    Danny
    Keymaster

    Hi Dairrell,

    Is your issue now resolved?

    Thanks,
    Danny

    #114682

    Dairrell
    Participant

    Yes it is. Thanks.

    Dairrell

    #114687

    Danny
    Keymaster

    Awesome and thanks for informing us, we appreciate it.

    Thanks,
    Danny

Viewing 9 posts - 1 through 9 (of 9 total)

The forum ‘Beaver Builder Theme’ is closed to new topics and replies.