Fluid Headers & Footers in Headway 3.0
So-called “fluid” headers and footers are quite the rage in web development, aren’t they? So pretty, So shiny, So, so fluid. You want it, and I can’t blame you. I want it too.
A future version of Headway will include the ability to create a fluid header and footer more easily without any custom code, but until then, this tutorial should suit. Let’s get on the same page about what we’re talking about: A fluid header and footer, as it’s often defined, really refer to anything where the header and/or footer area appear to fill the entire screen – no matter the width – while the page and header content (logos, phone numbers, etc) actually stay centered on the page. This is different than a strong trend in web design now called responsive design. You can see examples of fluid header and footer on this site, and at BBC News, WordPress.org, and WPTuts+.
Fluid Header
This part is the simplest – and doesn’t require any custom CSS at all.
1. Create a background image. You can do this in simple, free online image editors – like pixlr.com, for example. The image should be as small as possible, since we’ll just repeat it across the screen. For example, it might be a solid blue line that is 100px tall and just 3 px wide. Like this one.
2. Upload the background. If you wanted this as the background for the top of the site – to create the look of a fluid header – then upload it to Design Mode on the BODY element as a background, and tile it horizontally using the options in the Options Panel.
If you only want a fluid header, you can stop here. If you want a fluid footer, then you can go one step further. Right now, this one does require a little custom CSS (and, again, we will be improving this in the future)
Fluid Fooder
3. Create your footer background. Maybe this one’s black! With a gradient overlay! Mix it up a little, have fun! 
Anyway, same principle as before – small, and repeatable! Like this one!
4. Upload to the Media Library in WordPress. Keep the link to the file handy, we’ll need it in a moment.
5. Add the CSS. Go to the VIsual Editor in Manage or Design mode to access the Live CSS (members only) editor.
Code:
body.custom #whitewrap {
background-image: url(http://yourdomain.com/wp-content/uploads/1/12/footerbg.jpg);
background-repeat: repeat-x;
background-position: bottom left;
}
What does this do?
It adds a background to another full-screen element in Headway – the “Whitewrap” – which comes directly after the body and covers 100% of the screen. By using this, we can appear to have two background images (or one image that has a “fluid” center that grows with the content on the page). We’ve set the backgound to appear on the bottom left of the page, and to repeat across (x) the screen.
Spread the word!
By adding a comment below, you agree to abide by our comment policy.
Since this post is a year old, I am wondering how having full-width sections --- not just headers and footers--- is coming. I hope Swiss army block set includes that too...or instead...perhaps thatbis the direction? I know that is third party but it could work to create sections that go full width,
Caitlin,
I've used this method on several sites, thanks!
However, I'm working on a project where I'm using this method to get a fluid header background (actually for the navigation background). When I define my fluid header background on the body tag using the VE as you said I've (actually my client) found that it doesn't always extend the full width of the browser on her mac. It displays perfectly on all browsers on my windows pc.
As a note, I also have a full background image defined on for the html tag.
Any suggestions?
This seems to work. I put this into the Live CSS Editor. It says to show the header and footer only if the screen size is at least 625px.
@media screen and (min-width: 625px) {body.custom #whitewrap {background-image: url(http://...your-footer); background-repeat: repeat-x; background-position: bottom left;}}
@media screen and (min-width: 625px) {body.custom {background-image: url(http://...your-header); background-repeat: repeat-x; background-position: top left;}}
1 Like
When is the ability for real fluid headers and footers and nav bars coming. This fix just ends up creating a lot of issues. And when it loads on a page sometimes the image lags behind so it looks really sloppy to the viewer. Headways website uses a fluid header and footer in its design so isn't that a bit wrong that you can't even really create it in the theme.
I have implemented the fluid header and footer into my site. Thank you so much for the instructions! The problem I'm having though, is that when it is viewed on a mobile device/smaller screen... its just doesn't work because (understandably!) it doesn't line up with the content like its supposed to. Sooooo......
How do I tell it to not show on a smaller screen? I'd like to utilize the classes already in place for blocks (responsive-block-hiding-device-smartphones, responsive-block-hiding-device-tablets-landscape, and responsive-block-hiding-device-tablets-portrait). But I don't know how/where to do this. Help!
Hey again Caitlin! New (related) question. I want to have a fluid header with a background image (a tree that repeats horizontally). But, if I use the cheat, I will have a line across the tiled image on pages with longer text (the part of the image that makes the header look fluid). Obviously, this would look icky. Otherwise, if I only tile horizontally, then the tree image will just stop on longer pages. With the old version, the header sat in front of the background, which is what I'm after. Any ideas?
Is there a way to change :
background-image: url(http://yourdomain.com/wp-content/uploads/1/12/footerbg.jpg);
to something like
background-color: ffffff;
and then maybe size it instead?
Thanks!
Hi Caitlin,
Thanks for this, very helpful!
I have a fluid black header, 75px tall, which I figured out.
The body background color is white.
I also want to make the footer black, 100px tall and fluid. I uploaded a 2 x 100px black gif, pasted the live css code in... and it looks great.
Only problem is, when there isn't much content on a certain page, and no scrolling is needed, I am left with a 100px black footer showing up in the middle of my page, with all white below it. Is there a way to make it load black background all the way to the bottom of the web page?
thanks!
-peter
I need the footer to stay as in this example.. How do I do that in headway???
MY code is html javscript css.
Below just the example
http://www.newmediacampaigns.com/portfolio
Thanks!
@gabrielas I've checked out your site while looking for fluid headers and footers - I love the way your portfolio is showcased. What plugin did you use for the portfolio? I'm redesigning my own website and like to have a portfolio such as yours.
HI
Here is an example the portfolio I am working on.....
http://www.newmediacampaigns.com/portfolio
Somebody can help me add the footer (image) so it sticks to the dynamic content? (different heights?)as the example shows?
Thanks!!!
Hi,
I need to have a rotating IMG background behind the fluid header/footer. Is this possible? Any hints would be appreciated. I'm thinking some kind of playing around with z-index, but haven't figured it out yet..
Help! :)
Just been trying. The header works fine but I can't seem to get the footer to work as well. it ends up cutting off half the header and doesn't show up at the bottom at all.
@tristanjud Not quite sure I understand what's happening :) But make sure that your footer background image is set to be positioned at the bottom left and repeat-x. If it's showing up at the top of the screen and covering the background for the top of the page (the header background) then you've got a CSS error.
@rentageekmom I was able to get it working. I was using an image 1px by 1px. I didn't realise it needed to have a static height. The problem I now have is that when viewing on an ipad for instance and the Responsive Gird activated the spacing is messed up and the footer image starts to display under some of the content. Whats the fix?
@tristanjud Some iOS-specific styling probably, to force the content height or use a different image on mobile devices. Google helps!
I was wondering the same thing about making the nav bar fluid as well to match the header. Also how can you make it so the actual header block that you use in the grid is fluid as well as the nav bar block and the footer block. Then you would just be able to use the background color option to have a background and not have to upload an image. Is there a way to do this?
@akleid This is coming in a future version, but no, as I noted at the beginning of this tutorial, there isn't a way to have *true* fluidity at this time.
I was wondering... And tips on making a fluid navigation bar to match the fluid header? I have to duplicate the wire frames of a site done in 2.0.13 when this was easy... really don't want to downgrade for just this one little thing, but was lost on how to make it happen.
@illanaBurk Just add a section to the repeating image of your header that will represent the navigation background that can repeat across. Since we're just mimicking fluiditiy, it all comes down to the images.
@PhilGraves there is nothing in 3.1 that would change the tutorial. if you need more help, please try posting in the support forums, maybe someone in the community can give you a hand. make sure you get as much information as possible, just saying that it doesn't work isn't quite enough to help you.
Is there anyway to get the background image clickable such as a link background in headway 3.0? This code works perfect for background image but I would love for someone to show me how to get it clickable.
@cjrodriguez By definition, backgrounds are not able to be linked. To get that effect, you would need to create a link around a DIV that can hold your background image - or just an image itself. To do this as a full-screen "linked background" you would need to use hooks to insert your code before & after all the page elements. The headway_before_everything & headway_after_everything hooks are likely what you need. Post up in the forums for more help from our community on this one if you need it.
@rentageekmom Hey thanks for the speedy reply but if you don't mind can you show me step by step here because you seem very knowledgeable about this subject.I don't know where to place the div code.I've tried everywhere.Please help if you can I would greatly appreciate it.Thank again
@cjrodriguez That's beyond what I can do here in the comments section, and it's a bit beyond the realm of our support team, but a moderator with some extra time or a community member can probably help you out on the forums.
This is great but is there a way to make the header and footer expand vertically to fit the stacking navigation when viewed on a smartphone? I think it would require the repeating background in a div that wraps the header and navigation but I'm not quite sure how to achieve this.
@troytempleman It won't work using the same background as the "fluid" background effect we achieve int his tutorial. You would be best off using conditional CSS or a mobile stylesheet to load a more appropriate background image.
I have the same question. I want my header background different on my homepage than the rest of the site. In other words, every page, except the homepage will have one fluid header, but the home page will have a different one (actually the same one, just longer).
@Joseph Dang Yeah that's super common! I just answered Damian, but replying here in case you didn't get notification of his reply.
Hi Caitlan,
Great post, thank you, I'm using this technique on a site right now. One question I have is; what if we want a different header on say the front page? In other words what if I want a different repeating background image on blog pages as opposed to static pages?
Is this jus a CSS thing? How would we target it?
Thanks
Damian
Latest blog post: Promotions
1 Like
@d8m18n Yeah it's just CSS. We have a CSS map on the Headway Codex; hat you want is to use the body tags to target the homepage when you write your CSS for the background. So instead of just body.custom #whitewrap, you might do body.home #whitewrap -- or do BOTH, which allows you to have one for the homepage, and one for an interior page - like this site http://jackcsmith.com
@rentageekmom I know this is late. But to expand on this, if I want to have a different header on one page but the same on other pages, instead of doing the easy solution above, I'd attack it like the footer, but instead of
background-position: bottom left;
I'd make it:
background-position: top left;
Is that correct? And then just use a different URL for:
body.home #whitewrap (which would be the homepage)
Does that sound right? So my code would look like:
body.home #whitewrap {
background-image: url(http://yourdomain.com/wp-content/uploads/1/12/footerbg.jpg);
background-repeat: repeat-x;
background-position: bottom left;
}
body.custom #whitewrap {
background-image: url(http://yourdomain.com/wp-content/uploads/1/12/footerbg.jpg);
background-repeat: repeat-x;
background-position: bottom left;
}
@rentageekmom I'm sorry, those two code examples will both have top right for background position.
