Need help? Check out our Support site, then


WordPress.com Forums » Themes

Image dimensions on Themes headers

  1. ellenscrawford
    Member

    I'm trying to decide which Theme to use for my blog. I want to use a custom header image that is in portrait dimensions (taller than it is wide). Several Theme samples have images in the header position which are taller than they are wide, or are at least square, but when I try to put in a image, it always crops so it's much wider than tall. How do I access the potential to make a custom header image that is taller than it is wide and what Themes can I use to do this?

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

  2. thesacredpath
    Member

    All theme headers here are fixed sizes. You can see the set sizes in this post by Panos.

    http://wpbtips.wordpress.com/2009/03/24/header-images/

    The only true way to make use of a tall header image would be to modify the CSS on one of the themes here, which would take some CSS experience and the CSS upgrade.

  3. thesacredpath
    Member

    One thing I will note on tall headers, is that in many cases when someone visits your blog, all they will end up seeing is the header. If they do not scroll down, they might not even know there is content below the image. In general, I like to make sure that there is at least a bit of the area below the header image showing when someone visits a page, which typically means limiting the height of an image to about 500px (so as to take into account the top section of the browser window and the bottom status bar.

  4. sklaredesign
    Member

    I can change the height of the header image in css, but when i upload the image, will it only allow me to upload the standard size header??

  5. thesacredpath
    Member

    The header uploader will always crop/resize to the theme original header dimensions.

    When you change the height or width of the theme/header area, you then have to put the header image directly into the CSS instead. You upload the image to your media library, get the URL of that image and then place it into the appropriate section on the CSS. In the case of the Contempt theme in the blog linked to your username, that would be here:

    #headerimg {
background: url("http://sklaredesign.files.wordpress.com/2011/05/cropped-sklaredesign-logo-color.jpg") no-repeat scroll 0 0 transparent;
}

    Replace the image URL there now with the URL of the uploaded taller image.

  6. justjennifer
    Member

    And don't forget those of us using netbooks see even less vertically than those on desktop/laptop computers. 500 pixels vertically is really pushing it.

  7. timethief
    Member

    Just saying ... it's pushing it too far for me. I come to blogs to read content. I don't have the patience or inclination to scroll down past such a large header image every time I want to read a new post.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags