Decor Theme Header Image

Community Forums Forums Design Tips and Tricks Decor Theme Header Image

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  ramseyp 1 year, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #62741

    KathleenCD
    Participant
    Post count: 22

    I’ve upoaded a header image sized as specified 1140 x 140. There are 2 issues:
    1. Since replacing the text with my image the black background for the primary navigation menu is gone
    2. the header image is cut off on my Ipad & iphone

    Is there a way of making this work? Here’s the URL – http://wedontbakemuffinsbookclub.com

    http://wedontbakemuffinsbookclub.com
    #62749

    ramseyp
    Participant
    Post count: 99

    Hrmm,

    Looking at the CSS, when I removed “float: left;” from this style declaration:

    .header-image #title-area, 
    .header-image #title, 
    .header-image #title a

    The header assumed its full max-width of 1140px. There are two places you want to edit your theme’s style.css.

    On line 191, look for #header:

    #header {
    margin: 0 auto;
    min-height: 140px;
    width: 1140px;
    }

    Edit this declaration to read:

    #header {
    margin: 0 auto;
    min-height: 140px;
    width: 1140px;
    background-size: 100% auto!important;
    }

    This will tell the header’s background image to fit its element’s full width & to adjust its height accordingly. For browsers that honor background-size ( Latest versions of Chrome, Firefox, Safari and I think IE 10 ), this will keep the background image from being cropped.

    To fix the header div from being less than full-width, look in your theme’s style.css for line 265:

    .header-full-width #title-area,
    .header-full-width #title,
    .header-full-width #title a {
    width: 100%;
    }

    Edit it to read:

    .header-full-width #title-area,
    .header-full-width #title,
    .header-full-width #title a {
    width: 100%;
    float: none;
    }

    This will tell the header, on screens that are wide enough, to fill the max-width of 1140 pixels.

    Note – when your screen size is smaller, the header’s background image will be shorter, so the body’s background will show. Not sure the approach to fix this – you might try adding a background color to the header.


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

You must be logged in to reply to this topic.