Tutorials

Achieving Liquid Backgrounds with Fixed Content

Tags: Beginner

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