How can i stick an element to the bottom?

L

lolkaykay

New Member
On my website, I can't get the dancing silhouette in the background to stick to the bottom of the page on every monitor. When I googled the problem, all the tutorials taught me how to stick a horizontal footer on the bottom, but not a layered (with z-index) element. Is there any way to do this?

Here's the url: http://xscapenightlife.webs.com

Here's what I have so far:

HTML

Code: 
<div class="container">
<div class="bgdancer"></div>

<!--content -->
</div>
CSS

Code: 
.container {
	margin-left: auto;
	margin-right: auto;
	width: 905px;
	min-height: 100%;
	padding: 0px 100px 0px 100px;
	background: ;
}

.bgdancer {
	background: transparent url('dancer4.gif') no-repeat;
	width: 100%;
	min-height: 100%;
	position: fixed;
	bottom: 0px;
	left: 0px;
	z-index: -10;
	opacity: 0.5;
	filter: alpha(opacity=50);
}
 
PixelPusher

PixelPusher

Super Moderator
Staff member
To stick an element to the bottom you can use both absolute and fixed, but in my opinion the better one would be fixed.

If you are using the z-index to set it behind the container, you must set the position for the container and I would set the z-index value as well. Also if the dancer div is nothing more than a dancing image with no relevant content, I would add it to the bottom of your code so its the last thing read.

Note: a minimum height of 100% doesn't make sense. How can you have more than 100%? I would just use height:100%. More widely accepted anyway.

Markup
HTML: 
<body>
   <div class="container">
      <!--all site content -->
   </div>
   <div class="bgdancer"></div>
</body>

CSS
Code: 
div.container {
position:relative;
z-index:1;
margin:0 auto;
width: 905px;
height: 100%;
padding: 0 100px;
background: url(yourImage.png);
}
div.bgdancer {
position:fixed;
bottom:0;
right:0;
z-index:-1;
width:100px;
height:300px;
}

Hope this helps.
 
L

lolkaykay

New Member
Thanks for the help... I figured out the problem was that I needed to declare a definite pixel height for my dancer image
 
You must log in or register to reply here.
Top