Achieving Liquid Backgrounds with Fixed Content
Blog » CSS/XHTML » Achieving Liquid Backgrounds with Fixed ContentAchieving Liquid Backgrounds with Fixed Content
February 16th, 2009
I’ve been asked a few times by readers on how to create fluid backgrounds while maintaining a fixed width. When I was just getting my feet wet with CSS layouts, I too was a bit stumped by this situation as well. It’s really not that complicated as it seems, let’s look into it now.
HTML
What you can do is simply stretch the parent div 100% wide with the repeating background or color, and nest a fixed container class inside.
<div id="section_name" class="fluid">
<div class="container">
<!--Content Here-->
</div>
</div>
Let’s break this down so you can easily understand the logic here.
id=”section_name”
I used “section_name” as an example, but basically label each section with an ID so you can specify the unique properties (backgrounds, fonts, etc).
#section_name {
background: #333 url(background_image.jpg) repeat-x;
padding: 20px 0;
}
class=”fluid”
This will basically have the properties to stretch 100% and will act as the wire-frame of this section.
.fluid {
width: 100%;
float: left;
}
class=”container”
We will use this class to keep the contents fixed and placed in the center.
.container {
width: 970px;
margin: 0 auto;
overflow: hidden; /*--We add the overflow hidden to keep floating elements from breaking out of this container--*/
}
Last Note!
Since the background is stretching 100% across the monitor, what if the user has their browser at a size that is smaller than the width of the content? You will find that the background only stretches to the browser window size and not covering the entire content width. You can fix this issue by adding a min-width to your body tag in the style sheet.
To read further, checkout this great article by scriptandstyle.com.
body {
min-width:970px;
}
Conclusion
As you can see, this technique is quite simple! I’m sure there are various ways in achieving this effect, so if someone has a better or different solution, please do let us know. Below are some nice examples of designers using this effect.
- www.cappuccino.org
- www.thefirsttwenty.com
- www.clearleft.com
- www.redbrickhealth.com
- www.absolutebica.com
Similar Posts:
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
This entry was posted on Monday, February 16th, 2009 at 12:27 am and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
As a complete beginner to CSS, I found Blueprint CSS made this kind of fixed-content/liquid background setup a breeze. I used it for my homepage.
Given your blog title, I suspect you’d frown upon this?
How did you know…I just came to this problem was searching and found. Great timing! Thank you
Hey Adriano,
Although I am a big fan and believer in learning/creating everything by hand, just as long as you learned why/how it worked by your blueprint, I think it’s ok.
Everyone learns in different ways, and if that is your method I don’t think there is anything wrong with that. Just be sure that you don’t rely on it and do understand what it’s doing for you. Don’t let it guide you blindly and I think your all good!
Short and sweet, always a great read. Thanks!!
Your article will be a good resource for this kind of approach. Each layout technique whether fixed, fluid, elastic or what have you will depend entirely on the the project.
I’m leaning more towards using fixed width layouts. Thank you for this information.
That’s a good policy, Soh.
I’ll bookmark this blog for reference, when I need some clean code to learn from.
Thanks for the posts!
Nice approach Soh. I hadn’t realized it till reading your post, but I’ve used a similar approach on occasion. The place I differ is where you have the main content area I probably would have skipped the fluid div and just let the background of the body show through. I like the way you set things up here so I may have to change my ways a little.
By the way the link you have at the bottom of the demo winds up in 404 land. I’m guessing it’s meant to point back here to the post and maybe you changed the post URL after coding the link.
hey guy its very cool
Thanks for the quick reply and tutorial. Much needed. Glad I stumbled onto your site. Your awesome!!!
Ron R.
No problem, your very welcome
koo stuff
Great article . . .
Rare resource for web designers.
I do have a question: How can I proceed to get the footer sticky at the bottom of the page and specify the height of my choice?
Thanx
Absolutely awesome! I couldn’t find this fix anywhere on the web until I stumbled upon your site. Thanks so much Soh!
Is there a way to keep this as is and yet have a “sticky footer” and ensure that the footer remains at the bottom of the browser window so that when the user scrolls down the large page, there is no blank space between the footer background image and the bottom of the window?
sorry, just to clarify the previous request, this is assuming the content is insufficient to fill a full length of a browser window, so that it appears as though the footer is just hanging in the middle of the browser and the body background continues below it. Thanks.
Nice, i have been learning all tutorials for all from CSS to PHP (+++++++ alot more!!!)
And this was a nice Tut, but you never explains tags, thats a problem =/
@Toussaint & @Timmy:
http://www.cssstickyfooter.com/
just stick the footer outside of the wrap.
it’ll give you 100% width on it’s own. then, if you still want, you can employ the above technique.
cheers. and thanks for the all tuts. you’re is one of my fave sites.