Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.
up vote -2 down vote favorite

I want to set a full header in wordpress theme, while i want to keep the content narrow (center). How can i do that? I'm trying like:

<body>
<!-- BEGIN header -->
    <div id="header">

    ...

    </div>
    <!-- END header -->
<div id="wrapper">

It will display background image fine, the title and other text inside the header will be totally in the left side. (As its the wrapper which keeps the content center,and now header is outside of the wrapper). If i put the header inside the wrapper tag, the text inside header is at right place but the header image will also be displayed within the wrapper area only (it will not be shown on full body). I want to have one image in header background, and a different image in body background.

I will be thankful if you can help me with this problem.

share|improve this question
2  
More of a design question the a WordPress related question. – Bainternet♦ Jul 9 '11 at 21:20

1 Answer

up vote 1 down vote

What you should do is take everything from the opening to the closing "header" div and place it just after the <body <?php body_class(); ?>>

I can't tell you what to do exactly from there, but you will at least need to make some CSS changes. You can try wrapping it in a container div which might allow you to leave the code for the current header as is. This may also keep you from having to reposition other elements inside the header such as the Navigation Menu, search bar, or whatever you might have in the header.

If you wrap the header in a new id or class, make sure the outermost div has width:100% and no padding, or you get into doing hacks like "overflow:hidden", or "clear:both;. You will have to play around with it a bit, but with a few good Firefox Plugin's like FireBug, or WebDeveloper you should be able to get it figured out. Both Firefox plugins allow you to do live CSS editing on your website. You'll just need to copy the adjusted CSS and paste it into your actual CSS file.

Another method is to place an empty div tag above or below the header. Then use CSS to place it/size it. Or, you could just "fake the header" being full width with something like this:

body {
background:transparent url(images/bg-02.jpg) 50% 0 no-repeat;
margin:0 auto;
}
html {
background:url(images/bg.jpg) 0 0 repeat-x;
}

Good Luck.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.