Home>Support>How to get the masthead image to display properly

How to get the masthead image to display properly

By Rachel Bolton, 9 years ago. Last reply by Magus, 9 years ago.

Hello,

I’d like to use a repeating image as the masthead background for the website www.grandriversoap.com.

The image is currently sized at 300 px wide and 176 px tall and is uploaded to http://www.grandriversoap.com/wp-content/uploads/2015/06/grand-river-naturals-masthead.jpg.

On my computer, all I see is the solid teal color without the key at the bottom. On my mobile, I see the key, but then there is a wide band of teal below it and you can see a ‘menu’ and ‘search field’ on top of the key and teal band below (and then the actual ‘menu’ button in the tan colored menu bar below).

Is there a way to adjust this so that the image displays properly on both the mobile and desktop versions of the site? I can resize the image easily if that would be helpful. Otherwise, is there a setting or custom CSS that needs to be added?

Thank you,
Rachel

URL: http://www.grandriversoap.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Rachelamanda

    You can fix/change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    /*desktop mode*/
#masthead {
    background-position-y: -43px;
}
/*mobile*/
@media and screen (max-width:680px) {
#masthead {
    background-position-y: -20px;
}
}

    You will need to change the value in the @media query to match the value you have entered for the mobile menu collapse setting at Appearance->Theme Settings->Navigation.

    Let us know how you get on

    Magus

  2. 9 years, 3 months ago Rachel Bolton

    Thanks Magus,

    This helped…mostly :-)

    I can see the key at the bottom of the desktop site now. My new challenge is that the logo overlaps the key on both the desktop and mobile sites. I’ve tried making the logo slightly smaller, which didn’t help. I also tried increasing the padding of the header in Customize->General->Header Padding. This also doesn’t help, as the key moves up behind the logo image the larger the padding is.

    Is there a way to add padding to the bottom of the logo and not the top? Or another way to adjust it’s position?

    Thanks,
    Rachel

  3. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Rachel

    Using your existing settings, please try changing the original CSS to this

    #masthead {
    background-position-y: -30px;
}

    and adding this

    #masthead .hgroup .logo {
    padding-bottom: 15px;
}

    Thanks

    Magus

  4. 9 years, 3 months ago Rachel Bolton

    That did it. Thank you!

  5. 9 years, 3 months ago Magus
    Hi, I Work Here

    Hi Rachel

    You are welcome. If you need any more help please feel free to open a new support thread.

    Magus

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More