I used CSS to change my site header to 100% width. How wide should my header be?

  • Unknown's avatar
    roseeditorial · Member ·

    Hello, I added the following CSS to maximize my header width:

    .site-header {
    background-color: rgb(0,0,0);
    max-width: 100%;
    position: relative;
    width: 100%;
    z-index: 4;
    }

    I now want to upload my header image to fit the 100% width. So my question is, how wide should I make my header image (in pixels) to fit 100% width? Also, should I use a media query in this situation, and if so, how would I do that?

    I’m using the WordPress 2014 theme. Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    how wide should I make my header image (in pixels) to fit 100% width?

    There’s no set size. Different people have different monitor sizes and so their browser widths can vary quite a bit.

    Instead of setting the width to 100%, I would recommend picking a predefined width that is something large enough to fit to bigger screens but still not too big. Personally, I think the default max width of the Twenty Fourteen theme at 1260px is already pretty big! However, let’s say you wanted to change it to 1600px, that way you could make an image that is 1600px wide that you know will still work well at a variety of browser widths.

    Another option would be to keep the 100% width and use a background image or color behind the existing background image. Here is an example using the current header image repeated so you can see how it might look:

    #site-header {
	background: url(http://roseeditorial.files.wordpress.com/2014/10/wordpress_2014_header.gif) repeat-x;
}

.site-header {
	width: 100%;
}

    The 2nd part for “.site-header” extends the main menu width to match the width of its container element.

    I use a media query in this situation

    If you use the repeating background image example, then the responsive design should still work normally and you won’t have to adjust the media queries.

    If you’d like to brush up on how media queries work, here is some documentation about them:
    http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  • Unknown's avatar
    roseeditorial · Member ·

    Got it–thanks for the info!

    So what I understand is that there isn’t really a way to make my header image wide enough the span the entire width of the screen, as the rest of my blog does when max-width is set to 100%?

    As you correctly pointed out, I want to get rid of the white space on the right side of my header image–thank you for offering the CSS for a color background and repeating background image–both of those options look a bit odd with my image, so what I did was shorten my menu bar to the same width as my header image, so that although the rest of my blog stretches across my screen, the menu bar and header image have a white space to the right.

    Correct me if I’m wrong, but it seems that this issue can’t be solved using CSS customization, as WordPress automatically resizes header images to 1260 pixels wide, thus not allowing a header image to stretch across the screen, even if the space is given for the header image in CSS.

    I’m happy with the setup that I have now–let me know if there is any other way to widen the header image to match my content; otherwise, thank you for you help!

  • Unknown's avatar
    designsimply · Member ·

    So what I understand is that there isn’t really a way to make my header image wide enough the span the entire width of the screen, as the rest of my blog does when max-width is set to 100%?

    There are other ways. CSS is pretty versatile. I recommended one possible solution before that I thought would work best, but there is a way to use background-size to expand an image to fit into a large area. However, it’s a bit more advanced and tricky to set up. If you’d like to give it a go, I would suggest reading up on how background-size works first. Here’s a good primer:
    http://www.sitepoint.com/css3-background-size-property/

    The background-size:cover rule will cut the image off in weird ways in order to make sure the entire background area is covered. So, it doesn’t usually work well for images with lettering or logos on them (such as the image you are using now). However, if you switched to using the site title and tagline that are built into the theme and took the lettering out of the image, then it could work better. You can see what I mean by trying out this example:

    #site-header {
	background: url(http://roseeditorial.files.wordpress.com/2014/10/wordpress_2014_header.gif);
	background-size: cover;
	width: 100%;
	height: 240px;
}

#site-header img {
	display: none;
}

.site-header {
	width: 100%;
}

    Some additional caveats:

    You should also note that while you don’t want to use too huge of an image because it will slow down page loading but you want to use one large enough so that stretching it doesn’t degrade the quality too much on very large screen sizes. These things are tradeoffs, and you just have to experiment until you find the best fit for the image you’re using.

    There’s often more than one way to accomplish the same goal using CSS. As you can see, I’ve posted a few different of those examples here for you to try out and decide on.

  • Unknown's avatar
    roseeditorial · Member ·

    Excellent–thanks very much for the ideas! I’ll certainly look into the cover property. Thanks again!

  • Unknown's avatar
    designsimply · Member ·

    You’re welcome. :)

  • The topic ‘I used CSS to change my site header to 100% width. How wide should my header be?’ is closed to new replies.