WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Tasha
    Member
    Posted 11 months 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
    Forum Moderator
    Posted 11 months ago #

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

  3. Tasha
    Member
    Posted 11 months 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
    Forum Moderator
    Posted 11 months ago #

    Try:

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

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

  5. Tasha
    Member
    Posted 11 months 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
    Forum Moderator
    Posted 11 months ago #

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

    #masthead.site-header { background-size: 100%; }
  7. Tasha
    Member
    Posted 11 months 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
    Forum Moderator
    Posted 11 months 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 11 months 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
    Forum Moderator
    Posted 11 months 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 11 months 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
    Forum Moderator
    Posted 11 months ago #

    Yeah that sounds right.

  13. Tasha
    Member
    Posted 11 months ago #

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

  14. elames
    Member
    Posted 11 months 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 11 months ago #

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

Reply

You must log in to post.

About this Theme

About this Topic