Last week I posted a tutorial on how to create a motion parallax effect on your site. I also gave you a preview of what I would be posting about this week. Well, here it is. I will be showing you how to use the parallax technique plus another, slightly modified, technique called a sticky footer.

To being with you will need the three images that will be the background, middle ground, and foreground.

HTML

< body >
< div id="content" >
< h1 >Go Green or the Incredible Hulk will kill you< /h1 >
< div class="push" >< /div >
< /div >
< div id="wrap" >
< div id="inner_wrap" >< /div >
< /div >
< /body >

HTML Explained

The body element will have the background grass image attached to is just like in How to Make the Parallax Effect.

The div with the id content is where this tutorial starts to differ from the last. Now we will be interlacing our content area with the div elements that construct the parallax to give even more of a three dimensional look. Now it will look like the content area is in front of the background grass, but behind the middle and foreground grass. As indicated by the heading 1 element, this is where the content of the page will go. 

The div inserted at the bottom of the content div is an empty element that is needed complete the sticky footer. I will discuss is later in in the CSS explanation. 

The following two divs wrapper and inner_wrap are what complete the parallax. Attached to these div elements are the middle and front grass images. 

note: The only place that actual content of the site should go is in the div with the id content. 

CSS

body {
	height:93%;
	background:#C6FF93 url(back_grass.png) repeat-x 10% bottom;
}
html {
	height:100%;
}
#content {
	width:600px;
	min-height:100%;
	height:auto !important;
	height:100%;
	margin:0em auto -5em;
	margin-bottom:-450px;
	margin-top:50px;
	background:#fff url(hulk.png) no-repeat center 130%;
	border:1px solid #87AF63;
}
#content h1 {
	font-family:arial;
	color:#4A6037;
	text-align:right;
	width:50%;
	margin:60px 20px 20px 200px;
}
.push {
	height:29em;
}
#wrap {
	width:100%;
	height:29em;
	background:url(middle_grass.png) repeat-x 50% bottom;
}
#inner_wrap {
	width:100%;
	height:29em;
	background:url(front_grass.png) repeat-x 100% bottom;
}

CSS explained

As mentioned previously the body element has the background grass image attached. Also you will notice that the height property is set to 93%. This starts the sticky footer process and will usually be 100% with most situations. With ours though, 93% was the optimal setting. 

Next in line is setting the height of the html to 100%. This can also vary depending one your implementation. If this isn’t set to 100% or close to it the divs will sort of shrink wrap to the content and not expand completely to the bottom of the browser window. 

Now the content div. This is where the code gets a little redundant. There little hacks in the code to cover different browsers. Such as newer browsers support the min-height property, but ie6 doesn’t. That is the reason for the multiple height property settings. The negative bottom margin is to pull the wrapper div up over the content div so that you get an overlay look with the images.

The div with its class set to push sets how the content part of the page will react to height adjustments. It kind of puts a stopper on the content div when the browser height is shortened. The height property should also be adjusted depending on your page. 

The height setting for the wrapper and inner_wrap divs should be set to the same height as the push div so that the content and grass all stop at the same time when resizing the browser. 

One problem that I have found with this code is that in Firefox the background image will keep going up with the browser when shortened. This is because the height of the body element is set to 100%. It works fine in Safari, but if anyone can find a fix for this I will update this post. 

 

• Categorys:
• CSS
• Sites

• Tags:
• CSS
• design
• footer
• grass
• green
• parallax
• sticky
• sticky footer
• tricks