Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Big header in stead of small

  1. elisabethblog
    Member

    Hello everyone! I've got the Vigilance theme and have the CSS-upgrade. I would love to get a proper big, wide header in stead of a small "normal one" with 920x180 pixels. I've tried so many times but I can't seem to figure it out! I would love to use this photo: http://elisabethblog.wordpress.com/files/2009/07/header.jpg on this wordpress.com blog: http://elisabethblog.wordpress.com/ . I want it to look like The Giant's header: http://lundstein.wordpress.com/ in stead of what mine looks like at the moment. Can someone PLEASE help me with this?! Any tips are very appreciated!
    Thank you in advance!
    Elisabeth @ http://elisabethblog.wordpress.com

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

  2. thesacredpath
    Member

    First off on the site you referenced, at 1024 x 768 resolution, which a good portion of people are still using, virtually all you see on that blog in a maximized browser window is the header image. From a web design standpoint, that is not really a good thing. The header image on that site is 500px in height. My suggestion would be to not exceed that or people will not even be able to see the entire header image at 1024 x 768 resolution.

    My suggestion would be to limit the height of the header image to 450px maximum so that at the very least the top navigation would show. That said, it is your choice.

    All you have to do is change the height declaration value in #title from 180px to whatever you want, then upload the image to your media library and change the header URL in the #title to the newly uploaded URL.

  3. elisabethblog
    Member

    Yeh I know it's way too big, I just figured I'd get the proper size that I want then just try until I found a good size which would be the height you mentioned (450px).
    I don't see/don't know the "code" of the height declaration in #title. Also: if I make a 920x 450 px photo, would the right thing be changing the height declaration from 180 to 450 or 500? :)
    Sorry for being such a n00b.

  4. devblog
    Member

    Elisabeth,

    Replace your current "#title" definition with the following:

    h1#title {
background:transparent url('http://path/to/new/image.jpg') no-repeat scroll center top;
height: 450px;
width: 920px;
}

    Notice that I added the "h1" element to the "#title" selector; that forces the browser to apply the new dimensions you're specifying. An alternative to preceding the selector with the element is like this:

    #title {
background:transparent url('http://path/to/new/image.jpg') no-repeat scroll center top;
height: 450px !important;
width: 920px !important;
}

    Try either one.

    HTH

  5. devblog
    Member

    Additionally,

    Also: if I make a 920x 450 px photo, would the right thing be changing the height declaration from 180 to 450 or 500?

    If your image is 920px width and 450px height, you need to specify those dimensions; if you specify a number smaller than that, then you're image will be clipped (if the holding element has an "overflow: hidden;" attribute-value.

    Since you want to display your whole image, then you should specify its dimensions in your declaration.

    HTH

  6. elisabethblog
    Member

    Thanks Dev! Now I just have to make the header I want sized 920x450px right?

  7. devblog
    Member

    That's correct.

  8. elisabethblog
    Member

    Ok yay, thank youu! I'm hoping to get a new header up soon! :D

  9. thesacredpath
    Member

    Thanks devblog, I never fail to learn something from you.

  10. devblog
    Member

    My pleasure.

  11. elisabethblog
    Member

    You may now view my new header on http://elisabethblog.wordpress.com/
    Thanks to you guys this was possible! Thank you :) I now see that I need to change the colors on my blog a little so it matches the header!
    Again: THANK YOU THANK YOU THANK YOU!

  12. thesacredpath
    Member

    Looks good!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags