Eleven40 Centering Header Image

Community Forums Forums Design Tips and Tricks Eleven40 Centering Header Image

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  lorena 1 year, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #3170

    lorena
    Participant
    Post count: 4

    I’m having trouble centering my header image- you can see it is off to the far left right now. http://www.bigstatebiglife.com. I’d like it to have the same padding (?) as the rest of the page.

    Also, as another note, I need help figuring out how to get Chrome to reload an uncached version of my page- I can’t really see the changes so it is hard to know if my trial and error is working. I have cleared the cache/browsing history and also turned off my caching plug-in. Any other ideas?

     

    Thanks

    #3212

    TishaOehmen
    Participant
    Post count: 15

    On your style.css sheet make the following adjustments to center both the header images:

    Line 96: replace with
    #header {
    background: url("http://bigstatebiglife.com/wp-content/uploads/2012/12/cropped-IMG_26201.jpg") no-repeat scroll center top transparent;
    }

    Line 181: replace with:

    #header .wrap {
    background: url("images/logo.png") no-repeat scroll center top transparent;
    min-height: 150px;
    }


    Tisha Oehmen, Paradux Media Group
    Twitter: @TishaOehmen

    #3317

    lorena
    Participant
    Post count: 4

    Thanks Tisha that worked great! Now I’d like to adjust the height of the image- it seems to be using a cropped version- I’ve messed with changing the header image height but can’t seem to get it to change. I’d like the mountain image to be more like 300 with the logo portion staying at 150. Any ideas?

    Lorena

    http://www.bigstatebiglife.com

    #3320

    TishaOehmen
    Participant
    Post count: 15

    It looks like your mountain image is only 150px tall. So to start, you’ll need to get an image that is 300px tall.

    Then change:

    #header .wrap {
    background: url(images/logo.png) top left no-repeat;
    min-height: 300px;
    }

    That should do the trick. If it doesn’t, look for another line of code in the header/title area that is limiting the height to 150px and change it to 300px.


    Tisha Oehmen, Paradux Media Group
    Twitter: @TishaOehmen

    #3876

    lorena
    Participant
    Post count: 4

    This worked great! Thank-you!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.