That type of layout is sometimes referred to as “liquid” or “fluid”, though that technically applies to whether or not your content will expand/contract depending on the size of the browser window.
Thread Starter
davede
(@davede)
Thanks for that.
I didn’t really think that was what i was looking for due to the exact reason you said:
‘technically applies to whether or not your content will expand/contract depending on the size of the browser window’
i guess it is just a fluid header theme i’m after.
I could happily modify an existing fixed theme’s header if someone could point me in the direction of some good simple css for creating a fluid header.
Or perhaps you could search for “Full Screen Header”, or “Full Browser Width Header”.
Creating a header that goes the entire way across your site is actually pretty easy though. If you want one single image (such as a photo) that stretches the entire width, just use some CSS like so:
body {background:#fff url(/location/of/yourimage.jpg) no-repeat center top;}
You’ll need to create an image that is at least 1400px wide, but of course many screens these days are even larger. Then, that code basically says “Take the body element, make it’s background white (#fff), then place this image horizontally centered at the top of it.”
Alternatively, if you want a tiling image (the same pattern repeated across the screen), then you would create a tiled image (or go to a stock photo site like istockphoto.com and search for seamless) and assign it to the body tag like so:
body {background:url(/location/of/yourtiledimages.jpg) repeat-x center top;}
The repeat-x just says “repeat it horizontally”.
That should be enough to get you started. Have fun!
Thread Starter
davede
(@davede)
m8 you are a legend!
thanks so much your time and effort in responding.
I’ve done a fair bit of css before e.g. My Money Calculator however not too familiar with the full length header. would definitely prefer tiling over fixed width image for both size and screen compatibility reasons.
It seems strange that so many premium wp themes are styled in the standard fixed width header method when the nouveau style seems to be the fluid header (already named a few examples).
I’ve been searching for a day or two and have only found either fluid themes with really overly complicated stuff and a bunch of crap everywhere or the standard fixed width.
Might do up my own – how hard is it to do up a WP theme having had come straight html and css coding experience? any direction u could point me in?
Well, I learned a lot from just messing with existing templates. Start with TwentyTen (or possibly TwentyEleven, haven’t even looked at that yet so don’t know what it’s all about),and just experiment. Best of luck.
