header image not responsive for larger screen

Viewing 4 replies - 1 through 4 (of 4 total)
  • wooassist

    (@wooassist)

    11 years ago

    @anice06 the reason it repeats itself is because the Storefront’s header is set to be a background image. If you want it to look good on bigger screens, you’ll have to do a bit of custom CSS for it. Try the custom CSS below:

    @media screen and (min-width: 768px) {
    .site-header {
        background-size: 100% auto;
    }
}

    What we did in the code is forcing the width of the background to 100%. We also want to make sure that this only applies to large enough screens, thats why we put it in a @media block. Hope this works for you.

    James Koster

    (@jameskoster)

    11 years ago

    Alternatively you could upload a larger image 🙂

    yoins

    (@yoins)

    10 years, 7 months ago

    Hi wooassist,

    I have just used your code on http://outlet.yoins.nl (it’s not officially live yet). Just wanted to thank you!

    Best Regards,
    Robin

    starapple

    (@starapple)

    10 years, 7 months ago

    Thanks wooassist. All I had to add was “background-repeat: no-repeat;” to make it perfect.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘header image not responsive for larger screen’ is closed to new replies.