WordPress.org

Forums

Twenty Thirteen
Different header image for different screen resolutions. (15 posts)

  1. Tasha
    Member
    Posted 2 years ago #

    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

  2. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

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

  3. Tasha
    Member
    Posted 2 years ago #

    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!

  4. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    Try:

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

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

  5. Tasha
    Member
    Posted 2 years ago #

    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/

  6. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

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

    #masthead.site-header { background-size: 100%; }
  7. Tasha
    Member
    Posted 2 years ago #

    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?

  8. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

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

  9. Tasha
    Member
    Posted 2 years ago #

    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.

  10. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    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.

  11. Tasha
    Member
    Posted 2 years ago #

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

  12. Andrew Nevins
    Forum moderator
    Posted 2 years ago #

    Yeah that sounds right.

  13. Tasha
    Member
    Posted 2 years ago #

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

  14. elames
    Member
    Posted 2 years ago #

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

  15. esmi
    Forum Moderator
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic