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

[LauraJane]

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

[cehwitham]

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

[Author]

Posts