How to get full with (of browser) header in Balance theme

Community Forums Forums Design Tips and Tricks How to get full with (of browser) header in Balance theme

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  cehwitham 1 year, 5 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #38644

    LauraJane
    Participant
    Post count: 14

    I would like to make my header image in the balance the full width of the browser, and I need it to be centered, so that the logo part of the header is in the correct place. I’ve tried everything I can, but nothing works. I made a header image of 2000px, changed the wrap to 2000px, but no matter what I do, I can’t get the header image to center! Any ideas? Has anyone done this?

    Here’s an example of what I’m talking about: http://www.kimberlyanncoyle.com/

    My test site is http://www.test.supersweetlife.com

    Is it possible to do this with a wide image instead of a repeating tile? Someone else designed the header so I don’t have a tile I can repeat.

    http://www.test.supersweetlife.com
    #43716

    cehwitham
    Participant
    Post count: 396

    Hi Laura,

    You need to make #header, #header .wrap and #title-area have a width of 100%;

    Then you’d need to add the following styles to #title-area:

    `
    background-size: 100% auto;
    background-repeat: no-repeat;
    `

    If you want the logo to center you’ll need to change the image so that the logo appears in the center of it or create a background image with the wavy lines and flowers on and then add the logo separately over the top.

    I hope this helps.

    Chris


    Twitter: cehwitham Web: cehwitham.com

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

You must be logged in to reply to this topic.