Stretching header image all the way across the top

  • Unknown's avatar
    ggreactor · Member ·

    I’ve never really done much work with wordpress. I was just curious if anyone knew how I can stretch my header image all the way across the top of the page.

  • Unknown's avatar
    thesacredpath · Member ·

    In Twenty Thirteen, the theme on the site linked to your username, the maximum width of the theme and header is 1600px, which is wider than the monitors used by the vast majority of users, and even those on large monitors, such as the 2560px wide monitor I use, never have their browsers maximized, so for all intents and purposes, the header image in Twenty Thirteen is full width.

    Can you explain a little more what you are wanting, and if you are talking about a site other than http://ggreactor.wordpress.com/, can you provide a link to that site?

  • Unknown's avatar
    designsimply · Member ·

    @ggreactor, how to stretch a header image depends on what theme you’re using. If you reply with a link to your site, someone can help take a closer look.

    If you’d like to do a little more research on your own, I can try to point you in the right direction.

    This page has a good explanation of the “background-size” property:
    http://www.sitepoint.com/css3-background-size-property/

    The “contain” value is the one that stretches images to fit the space. With header images, sometimes it cuts of the image depending on the dimensions of the image compared to the space given for it in the theme. Whether or not this stretching option is the best choice will depend on what kind of image you’re using. Images that still look good cut off on the top and bottom a bit work best.

    As an alternate solution, sometimes repeating a header image works just as well as stretching it. Which solution you choose will depend a lot on how your site is setup specifically and what theme you are using. Here’s an article from Smashing Magazine that explains a ton about the “background” property and there’s a section on background-repeat:
    http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/

  • The topic ‘Stretching header image all the way across the top’ is closed to new replies.