How do I add a bigger header?

  • Author
  • #842213


    On some websites they have a bigger header like and and stuff whats the code for that?

    The blog I need help with is



    Only Staff provide CSS editing support and this is the notice posted at the support link:

    Support will be closed over the weekend. We will reopen by 8am Pacific Time on Monday, March 12th.

    Please be patient while waiting.


    To add a larger header image than the one built into a theme, first you should create an image the size you want, upload it to your media library, and copy down the image URL.

    Then add CSS to hide the existing image and set a background image on the HTML element one step above it. What CSS you add depends on the theme you use. The and sites you mentioned are using the Digg 3 theme.

    Here is an example of the CSS you could use to add a large header image to the Digg 3 theme:

    #header-image img, #header-overlay img {
    display: none;
    #header {
    display: block;
    width: YOUR_IMAGE_WIDTH;
    height: YOUR_IMAGE_HEIGHT;
    background: url(YOUR_IMAGE_URL);
    #pagetitle {

    Replace YOUR_IMAGE_WIDTH and YOUR_IMAGE_HEIGHT with your image width and height. Replace YOUR_IMAGE_URL with the one for the image you uploaded to your media library. Replace HEIGHT_ABOVE_SEARCHBOX with the space you’d like to see above the search box.

    Also, our CSS forums are open to everyone! Building a community where everyone is welcome and has an opportunity to participate is the type of environment we’d like to project.

The topic ‘How do I add a bigger header?’ is closed to new replies.