Need help? Check out our Support site, then


Change height of header in Autofocus theme

  1. My header image is 800x380. The Autofocus theme only allows for a header of 800x216. I'd like to alter the head size to accommodate my header image. Is this possible, and if so, how can I do this? I am have very limited experience with HTML and CSS. Any help would be appreciated!

    I believe this is the code for the header image. I see where the width is defined but not the height.

    #header-wrapper,
    #header,
    #access,
    div.menu,
    #content,
    #sidebar,
    #comments,
    #footer {
    display: inline;
    float: left;
    position: relative;
    }
    #header-wrapper {
    width: 800px;
    }
    #header {
    padding: 24px 0 48px;
    width: 595px;

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

  2. This is quite easy with Autofocus since it puts the custom header into the CSS rather than into the HTML. Upload the image to your media library, get the URL of that image, add the following to your CSS and then replace IMAGE URL between the double quote marks with the full URL of your image. I would add this to the very bottom of any CSS you have already used.

    #header-image {
    background: url("IMAGE URL") no-repeat scroll 0 0 transparent !important;
    height: 380px !important;
    }
  3. Thank so much! Worked like a charm. :)

  4. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic