WordPress.org

Support

Support » Themes and Templates » Different header image for different screen resolutions.

Different header image for different screen resolutions.

  • Tasha
    Member

    @queenv

    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
    Forum moderator

    @anevins

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

    Tasha
    Member

    @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
    Forum moderator

    @anevins

    Try:

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

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

    Tasha
    Member

    @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!

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

    Andrew Nevins
    Forum moderator

    @anevins

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

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

    Tasha
    Member

    @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
    Forum moderator

    @anevins

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

    Tasha
    Member

    @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
    Forum moderator

    @anevins

    Try using media queries for this: http://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.

    Tasha
    Member

    @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
    Forum moderator

    @anevins

    Yeah that sounds right.

    Tasha
    Member

    @queenv

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

    elames
    Participant

    @elames

    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%; }

    esmi
    Forum Moderator

    @esmi

    @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.