Different header image for different screen resolutions.

  • Hello all
    Thank you for a great theme! I have one problem though.
    From reading all these support threads I now understand that the header image is not responsive for Twenty Thirteen. I was wondering if it is possible to use a different header image for different screen resolutions? I am using a child theme.
    Many Thanks
    Tash

Viewing 14 replies - 1 through 14 (of 14 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can make the header responsive by giving it a background-size of 100%, can you do that instead?

    Thread Starter Tasha

    (@queenv)

    Hi Andrew

    Thanks for the quick reply. I did the following in my child theme:

    .site-header {
    position: relative;
    height:100%;
    width:100%;
    }

    but it had no effect. Am I understanding you wrong?

    Thank you!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try:

    .site-header { background-size: 100%; }

    https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    Thread Starter Tasha

    (@queenv)

    Thanks for the link Andrew, I tried it but still no change?

    Here is a link if it would help. Maybe I’m just doing something stupid!

    https://www.granthamfarm.angelicdesign.co.uk/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Looks like you just need to be a bit more specific with CSS:

    #masthead.site-header { background-size: 100%; }

    Thread Starter Tasha

    (@queenv)

    Thank you Andrew. That does indeed make it responsive. I will be able to use it in future, however it doesn’t really help me in this case as it looks kind of silly with the tiny images and blue bar on a mobile. I just can’t think of a better way to do it other then loading different headers for different screen resolutions?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Loading different headers for different screen resolutions is a good way to do things, what resolutions were you planning on adding this to?

    Thread Starter Tasha

    (@queenv)

    I would like to use this header for any laptops and desktops, a different one for tablets and a third for mobiles. I know this is a bit general but I will design them to fit most resolutions for those screens.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try using media queries for this: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    You can continue using a background size of 100% but then at different widths just load another image, as you described. It could improve performance on potentially low-bandwidth devices (mobile platforms) as you are instead loading a smaller and more suitable image.

    Thread Starter Tasha

    (@queenv)

    Do I then remove the header image from Appearance > Header and add it as a background image with the CSS media queries?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yeah that sounds right.

    Thread Starter Tasha

    (@queenv)

    Ok I will give it a try. Thank you Andrew, much appreciated!!!

    I am just starting my first site with twenty thirteen. I want the header image to be responsive. So when I came across this question..thought I would tag on.
    I have created a child theme and intend to use it.

    Where does one place this in the style sheet? Under site header??
    Thank you

    #masthead.site-header { background-size: 100%; }

    @elames: As per the Forum Welcome, please post your own topic. Your question is completely different to the OP’s.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Different header image for different screen resolutions.’ is closed to new replies.