I need to reduce the size of the header image.

  • Author
  • #838225


    My theme is “clean home”.

    My biggest problem is to move the header-image over the nav which is served as a menu right now. I saw that in the code div for “nav” is above div “header-image” but I think there should be a way to control it in the CSS but I can’t find a way yet.

    The second problem is the theme only take image size 900×200 pixel but I want the header image height only 150px. I tried to use CSS to control by adding height to the “#header-image” on the stylesheet but that cause the layout to break. Is there anyway to reduce the size of the header-image?

    Also there is a huge wasted space on the top because of an unused div tag
    “<div class=”header”>
    <div id=”logo”>
    <h1>The High Heel Gourmet</h1>
    <h2>by Miranti</h2>
    This is the div for the “generic header” that I didn’t use. It seems to take up the space even though, I did reduce all the padding and margin as much as I can until it looks like the current site now but it still takes at least 10-15 pixel. Is there anyway I can really remove that?

    And Yes, I use to be a web designer but I haven’t been working hands on in the last 5 years so I’m not only rustic but I don’t know what’s new anymore.

    Thanks in advance.

    This div is for the “generic header” that I didn’t use but it’s there anyway. Is there a way I can remove it.

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


    This will move the navigation below the header in the Clean Home theme:

    .header {
    position: relative;
    padding-bottom: 20px;
    #nav {
    position: absolute;
    bottom: 0;
    right: 0;

    The second problem is the theme only take image size 900×200 pixel but I want the header image height only 150px

    First, create an image that is 900 x 150 pixels, upload it to your media library, and copy down the link for it.

    Then add the following CSS to your Appearance → Custom Design → CSS page and replace YOUR_IMAGE_URL with the image link you just copied:

    #header-image a {
    background: url(YOUR_IMAGE_URL) no-repeat;
    display: block;
    width: 900px;
    height: 150px;
    #header-image a img {
    display: none;


    @designsimply you are a real angel. Thank you very much!

    I did fix the top nav but didn’t change the size of the top image because I will be changing the top image every month. I don’t want to go through the trouble of changing the URL every month too.

    Another problem! I think this will be last since I’m pretty much done with everything else. The image that I uploaded to the content, (I think it called .henty img or body .attachment img) is now has the width for the original size 590px ?!?! It was 520px. I must have screwed up the adjustment somewhere in the stylesheet not knowing that it will effect this. So my quick fix is to assign the size of the image AFTER I uploaded them but it’s quilt time consuming.

    Do you have any quick fix in the CSS that will make the uploaded images become 520×344 by default?



    Do you have any quick fix in the CSS that will make the uploaded images become 520×344 by default?

    First, go to Appearance → Custom Design → CSS in your blog dashboard and change the limit width in the CSS Settings at the bottom left. Set the limit width to 520, and see if that fixes the problem.

    If that doesn’t help, you could try adjusting image size with CSS, but there’s a chance it will affect some images in an unexpected way, so that’s something to watch out for. The max-width property might work the best. Give this a try:

    .post img {
    max-width: 520px;


    The box works like magic! (Ridiculous, how I didn’t see that box but ruin my eyes trying to read every line of style in the CSS…lol)
    Thank you so much.


    I’m happy I could help! Cheers :)




    I went in to the style sheet today and would like to change the style for the caption (below are the changes). Once I added them the whole right side column had disappeared! I tried to restore using history on wordpress css but it didn’t change back. What did I do wrong? Can you please, help me change it back?

    .hentry .wp-caption {
    /*border:1px solid #ddd;*/
    padding: 4px 0 5px 0;

    .hentry .wp-caption-text {
    font-style: italic;
    line-height: 13px;
    color: #999;
    padding: 5px;




    I compared the existing stylesheet to the last one I saved and found that all the width aspect had almost all removed from the style sheets. Some style that only has width aspect also got removed (toward the bottom). This is really weird!



    Also I tried to copy my saved stylesheet with the width back on to the CSS but as soon as I click “save stylesheet” the width had disappeared!




    Is it possible you changed the CSS settings from “Add my CSS” to “Don’t use Clean Home’s CSS” recently on your Appearance → Custom Design → CSS page? If so, can you try changing that setting back as a first troubleshooting step?


    I double tested this using my test blog and your CSS as well as the Preview button on your Appearance → Custom Design → CSS page. And switching back to the “Add my CSS” option in CSS Settings should fix the width for you.






    Then what should I do with ALL the style that I need change?



    Now it changed back to the 2 column whewwwwww…but then I still need to change colors roll over and many many things. Can I switch it back to the use my style sheet or I need to start it over.



    It doesn’t seem to take the new style that I put in.


    Ah, okay, so let me explain. Both of those options use your styles.

    With the “Add my CSS” option, the styles from the original theme are used and then any *changes* that you add in the edit CSS area are used on top of the built in styles. This is the best option for taking a theme and making adjustments to it.

    With the “Don’t use Clean Home’s CSS” option, that means you dump all of the built in styles from the theme and just use styles that you add. This is a good option for experts who want to completely redesign an entire theme from scratch.

    The first option, “Add my CSS,” is what I almost always recommend to most users. It makes it easier to do adjustments and easier to debug CSS later. In fact, in order to make your theme easier to read, you might try removing the original styles that you copy and pasted in before and try just adding back the adjustments. It will probably help you in the long term!

    If you need any help with it, just reply back and I’ll take a look to see how else I can help/direct you.

    P.S. I’m glad you asked about it!



    Glad you explain that…Thanks!

    I’m fixing the stylesheet and using the “additional style” instead of replacing the whole stylesheet now. Almost everything is back in place of course left a few glitch that I can’t seem to fix on my own.

    1) The top navigation: You fixed this for me before but now it becomes an issue again. The “Navigation” is now back on top of my header image instead of above the solid line. How can I push it down?

    2) All of my images that has no caption showing a dotted line underneath them. I tried .hentry img, .hentry image a, and try to assign border-bottom: none; to them but they don’t work. How can I successfully get rid of them?

    3) The “meta” underneath the header h1 seems to have too much line-height but I can seem to find the class to close the gap. I tried .content .post-meta, .content .post-meta a and of course they didn’t work.

    Thanks so much for the help. I couldn’t do it without you.



    Knock knock…I’m still patiently waiting.

The topic ‘I need to reduce the size of the header image.’ is closed to new replies.