How do I resize the header image?

  • Author
  • #518733

    I’m using the Modularity Lite theme, how do I use a taller header image?

    The blog I need help with is


    You have to have CSS editing experience and the paid CSS upgrade.


    Hello, I’m looking to resize the header using this theme also. I have CSS access. my site is

    Can anyone please assist, or at least let me know how/where to find it in the stylesheet?



    First off, NEVER use a 5.2MB image as a background. Loading your site just burned about 6MB of my precious, limited, wireless internet bandwidth. I’ll be sending you an invoice. You need to really work that image over. I just attempted to optimize it and the lowest I could get it was 285k, and that is still nearly 3 times the size it should be.

    When you say resize, what do you mean? Width, height, both?


    Hi, thanks for the heads up about the background image. I’ll change that asap. Do I get a bulk rate after 4MB? :)

    As for the header, I want to drastically increase the height and width, and push it closer to the top if possible.




    Thread moved to the CSS forum….


    To move everything closer to the top, add this to your CSS body selector. All widths shown below are the originals.`.span-15 {


    As far as changing the width of the header, you have to first increase the width set in .container, but a not of caution here: There are still a good number of people using 1024px wide monitor resolutions (including those on netbooks) and your container is presently set at 990px, which is about the maximum you want to use to accommodate 1024px wide resolutions.

    .container {

    The net increase in width in .container above will have to be added to several other places to keep things in proportion.

    .container-inner {
    .span-15 {

    Lastly you will have to make a new header image the exact size you will need (950px original width + your net added width x whatever height you set below), upload it to your media library, get the URL of that image and replace URL_OF_NEW_HEADER with that URL.

    #header-image {
    background:url("URL_OF_NEW_HEADER") no-repeat scroll 0 0 transparent;

    Ignore the CSS at the end of the first paragraph. Obviously I copied and pasted it there by mistake.


    Thanks! I was able to resize the header. I made it taller, but when I expanded the width it pushed the columns with the widgets to the bottom of the page. That’s fine, since it looks better square anyway.

    However, I couldn’t get the margin command to work. I tried entering into CSS as
    #body {margin:0}

    I also did it without the “#” and finally just by itself. However, nothing seemed to take. Is there a step I’m missing?



    edit: I did put the colon in when I put it in CSS. Just forgot to put it in here when I posted.


    Body does not have widths or heights.

    Did you try the changes I have above and then edit the width/height values as I said? That code worked fine on my test blog.


    I’m sorry, just now I was looking at the wrong blog.

    In the screen CSS for your site is this:

    body {
    margin:1.5em 0;

    By changing it to

    body {

    it moves the main part of the blog up by 1.5em. If putting the above into your CSS did not change it, try this

    body {
    margin:0 !important;

The topic ‘How do I resize the header image?’ is closed to new replies.