This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How to get the masthead image to display properly

Resolved 5 replies premiumthemetheme-vantage
Rachel Bolton
10 years ago · Last reply by Magus 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Magus Staff 10 years, 8 months ago

    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. Rachel Bolton 10 years, 8 months ago

    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. Magus Staff 10 years, 8 months ago

    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. Rachel Bolton 10 years, 8 months ago

    That did it. Thank you!

  5. Magus Staff 10 years, 8 months ago

    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.

Have a different question or issue?

Start New Thread