Full-Width Header

  • Author
  • #1340326


    Can someone please help me to figure out how to adjust the header to full-width while keeping the main blog portion the same size.

    Thank you in advance for your assistance.


    The blog I need help with is mysouldothdelight.wordpress.com.


    With your current setup, you have a variable width background image but the content container (#page) has a max width of 960px. Because of how the HTML is structured where the header image is inside the page element, the header image has to be an equal or smaller size. There are a few ways you could work around that, but it will take a little work.

    I started experimenting with CSS for your blog, and here’s what I came up with as a starting point for you:

    #masthead > a img {
    	display: none;
    #page {
    	background: url(http://mysouldothdelight.files.wordpress.com/2013/06/header.png) top center / 100% no-repeat;
    	max-width: 77%;
    @media screen and (min-width: 320px) {
    #page {	padding-top: 100px; }
    .main-navigation { top: 80px; }
    @media screen and (min-width: 600px) {
    #page {	padding-top: 200px; }
    .main-navigation { top: 180px; }
    .main-navigation {
    	text-align: center;
    .main-navigation .nav-menu {
    	display: inline-block;
    	padding-right: 6em;
    @media screen and (min-width: 960px) {
    #page {	padding-top: 260px; }
    .main-navigation { top: 250px; }
    @media screen and (min-width: 1300px) {
    #page {	padding-top: 290px; }
    .main-navigation { top: 280px; }
    @media screen and (min-width: 1440px) {
    #page {	padding-top: 320px; }
    .main-navigation { top: 320px; }
    @media screen and (min-width: 1600px) {
    #page {	padding-top: 380px; }
    .main-navigation { top: 370px; }

    What this example does is override the background image in from your blog settings. It then sets a background image on the #page element and makes that element have a variable width so that the header image expands and contracts based on a percentage value when the browser width changes.

    The main disadvantage for using a method like this is that you will need to add different amounts of padding to the top of #page depending on the browser width. One way around that is to use media queries, and that’s what I have done in the example above. It’s up to you how many media inquiries to you’d like to use—I think the example has a pretty wide range of them. You may want to adjust some of the “padding-top” or “top” values if needed.



    Thanks for the input. I feel like I am really getting somewhere on this. I uploaded the code to a testing site so as not to be messing up the main site that visitors see all the time. The header is looking great, the menu is a little bit high but playing with the code.

    I am also using a cross browser testing site to get an idea of what it looks like on all screen sizes.

    the css testing is uploaded to http://hbbdtestblog.wordpress.com

    I am having issues with the width of the content area being too wide. I thought about adjusting the background but the problem is that where the blog text is it’s not centered on the screen. Is there a way to adjust the width of the main body of the site to stay within the max width of 960px or at least center on the screen…then I can adjust the background?

    Also, when I view on an ipad sized screen the header totally disappears. On a phone screen it’s fine. Any thoughts?


    Is there a way to adjust the width of the main body of the site to stay within the max width of 960px or at least center on the screen…then I can adjust the background?

    You could make #page a percentage and then set a max width for every direct child element of #page.

    Take a look at the HTML on http://hbbdtestblog.wordpress.com/ to find out how the structure is setup. Here is a basic outline:

    <div id="page" class="hfeed site">
    	<header id="masthead" class="site-header" role="banner"></header>
    	<div id="main" class="wrapper"></div>
    	<footer id="colophon" role="contentinfo"></footer>

    If you use “selector1 > selector2” then you can apply CSS to just selector 2 elements that are children of selector 1. To translate that for the HTML example above, you would do something like this:

    #page > header,
    #page > div,
    #page > footer {
    	max-width: 960px;
    	margin: 0 auto;

    The “margin: 0 auto;” part is what centers all the children elements.

    It looks like the iPad browser doesn’t understand the “background” notation used.

    Try changing this:

    background: url('http://mysouldothdelight.files.wordpress.com/2013/06/header.png') top center / 100% no-repeat;

    To this:

    background: url('http://mysouldothdelight.files.wordpress.com/2013/06/header.png') top center no-repeat;
        background-size: 100%;

The topic ‘Full-Width Header’ is closed to new replies.