Fixed footer and fixed img background

HTML & CSS
1

Hi,
Please, can you help me? I have an image with <img> tag in my page, I want use that image as background of the page, and I want that one fixed, since I don’t want to scroll that image with the text. So I have set the overflow of the html,body as “hidden”, but the overflow of the #wrapper as “scroll” for scroling only the text but not the image. But the problem is that the scrollbars of #wrapper don’t scroll anything. I’ve used <img> for earlier version of browsers as ie6 etc…, with absoute pos and z-index -1.
(I have also read about sticky footer to: http://codecamel.com/fullheight)
This is my attempt. I hope you can help me to resolve it. Many thanks! :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <link rel="shortcut icon" type="image/x-icon" href="include/favicon.ico">
   <title></title>
   <meta name="description" content="">
   <meta name="keywords" content="">
   <style>
   body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      font-size: 16px;
      overflow: hidden;
   }

   #wrapper {
      height: auto !important;
      min-height: 100%;
      height: 100%;
      position: relative; /* Required to absolutely position the footer */
      background: grey;
      overflow: scroll;
   }

   #footer {
      height: 50px; /* Define height of the footer */
      position: absolute;
      bottom: 0; /* Sit it on the bottom */
      left: 0;
      width: 100%; /* As wide as it's allowed */
      background: red;
   }

   #content {
      padding-bottom: 50px; /* This should match the height of the footer */
   }

   img {
      position: absolute;
      z-index: -1;
   }
   </style>
   </head>
<body>
   <img src='include/image.jpg'>
   <div id='wrapper'>
      <div id='header'>
      </div>
      <div id='content'>
         <p>Lorem ipsum dolor sit amet consectetuer quis commodo leo eros ac. Non dis semper quis condimentum urna et sed Vestibulum feugiat facilisis. Id feugiat Praesent Vestibulum Morbi Curabitur a dui sagittis ac urna. Nisl risus ac tellus Quisque fames semper eget wisi pretium pellentesque. Nam consectetuer lacinia auctor suscipit tellus Vivamus eu semper non lorem. Dolor cursus Donec In augue nulla hendrerit Donec Vestibulum nec congue. Nunc netus elit.</p>
         <p>Pellentesque consectetuer lobortis id Cum orci gravida Nam purus Nunc porttitor. Nunc condimentum urna Nulla laoreet orci elit ac In aliquet ligula. Congue commodo rhoncus mattis nibh lobortis accumsan gravida a Maecenas quis. Ac justo Vestibulum tristique dictum Pellentesque tristique ipsum vitae Curabitur accumsan. Nulla odio sem euismod pellentesque amet vitae enim dui non.</p>
         <p>Elit eget elit id dapibus a nunc justo ante adipiscing Nam. Vel lacus nibh pede gravida nisl Nulla purus habitant pretium justo. Condimentum Pellentesque Maecenas nulla Quisque nisl Phasellus id auctor nunc at. Sem eros aliquet id malesuada pede vitae Nam Vivamus urna Suspendisse. Curabitur id eget turpis malesuada netus velit.</p>
         <p>Nulla urna Quisque Integer sagittis sed id nec Suspendisse tincidunt Nam. Convallis nec ac semper vitae urna id tincidunt tempus eget Donec. Condimentum sed ligula nibh dolor risus et metus neque sed sed. Pede convallis amet eget Curabitur sapien id ipsum Morbi tincidunt pulvinar. Lacus libero Pellentesque consequat Donec id.</p>
         <p>Laoreet wisi purus Aliquam in id gravida Nulla tristique nunc libero. Sagittis volutpat in magna semper Aliquam orci elit urna dis Nullam. Eu Aenean ante turpis Quisque egestas consectetuer enim justo vitae turpis. Justo vitae nibh Curabitur Nullam nibh Vivamus leo Aenean eu tellus. Tincidunt amet diam massa justo morbi leo ligula fringilla consequat leo. Lacus sem Nam Ut Nulla Morbi Cras Sed.</p>
         <p>Et sapien id Nulla Nunc turpis ligula neque dolor dis magna. Lorem pretium wisi rhoncus nec rutrum id libero Curabitur risus non. Leo interdum faucibus vel et justo metus Aenean vel Curabitur et. Semper congue lacinia fringilla feugiat feugiat euismod justo nibh Morbi id. Phasellus interdum In tempor habitant felis mauris Vestibulum pretium diam fringilla. Quis a Donec id sem et eget consectetuer metus neque tristique. Nam porttitor.</p>
         <p>Tincidunt Vestibulum Suspendisse tellus consectetuer consequat laoreet Nunc augue porttitor adipiscing. Urna feugiat libero sed condimentum lorem Quisque tellus lacinia metus Sed. Sociis orci dictumst Nunc pellentesque In id non Nam justo Ut. Proin fermentum vel vestibulum nibh purus et et a Phasellus Vestibulum. Mattis sed risus dapibus odio lacinia metus ac velit ullamcorper.</p>
         <p>Sit justo sed fermentum cursus tempor nonummy neque nunc nec faucibus. Laoreet nunc velit venenatis Vestibulum mi fringilla orci ac malesuada Pellentesque. Pede mauris Curabitur Morbi ac suscipit nascetur Praesent et ut et. Eros Donec Praesent ut at et semper tincidunt Pellentesque cursus id. Sem cursus mus Maecenas Sed lacus venenatis eros adipiscing sit facilisis. Nibh justo id Vestibulum auctor adipiscing.</p>
      </div>
      <div id='footer'>
      </div>
   </div>
</body>
</html>
2

I have also read about sticky footer to: http://codecamel.com/fullheight)

Ignore those examples because they are using techniques that were never working properly anyway. Refer to the Sitepoint sticky footer reference as it is the ultimate source for the sticky footer which was actually invented in these forums around 2003 with my help.

Your example fails because you have not set a height for #wrapper but used height:auto and min-height. You need to set an actual height (height:100%) and remove the height auto and min-height otherwise the scrollbar will never be triggered because you have just hidden the overflow on the body element.

The example also fails because you have absolutely placed the footer within #wrapper and will therefore just scroll with the document. You would have needed to put the footer outside of #wrapper and then it should stay still. However that means it will overlap the wrapper and the scrollbar.

You seem to be mixing a number of concepts here so lets first define what the concepts are that you need.

Do you want a ‘sticky footer’ or do you want a fixed footer? They are not the same things.

A sticky footer is a footer that sits at the bottom of the viewport on small pages where content doesn’t go below the fold. On pages where there is more content than will fit in the viewport then the footer sits at the end of the document (and below the fold).

A fixed footer on the other and places an element at the bottom of the viewpoprt at all times and will not scroll with the document no matter what content is above.

It seems to me that all you want is a fixed footer and so can get rid of all your other rules and just use this.


#footer{
position:fixed;
bottom:0;
left:0;
right:0;
height:50px;'
}

Because the footer sits at the bottom of the viewport you will need to ensure that the last in-flow item on your page has sufficient bottom padding so that you can scroll past the fixed footer and see the content.

Note also that is generally a very bad idea to remove the scrolbars from html and body because they are special elements and always keep the scrollbars available whereas using #wrapper as your viewport you will find in some browsers that the vertical scrollbar may be off screen and you will have to scroll to see it where content is wider than the viewport.

If you are looking to have the scrollable section above the footer then you could set the wrapper to position:absolute and use top:0; bottom:50px to place it.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height:100%;
	margin:0;
	padding:0
}
#wrapper {
	position:absolute;
	top:0;
	bottom:50px;
	left:0;
	right:0;
	background:#ccc;
	overflow:auto;
}
#footer {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	height:50px;
	background:red;
}
</style>
</head>

<body>
<div id="wrapper">
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll Last</p>
</div>
<div id="footer">Footer</div>
</body>
</html>

However as I mentioned above you will have to scroll to use the right scrollbar if your content is not fully fluid.

A better approach is just to use a fixed footer.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	height:100%;
	margin:0;
	padding:0;
	background:#ccc;
}
#wrapper { padding-bottom:50px; }
#footer {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	height:50px;
	background:red;
}
</style>
</head>

<body>
<div id="wrapper">
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll test</p>
		<p>scroll Last</p>
</div>
<div id="footer">Footer</div>
</body>
</html>

If you really do want a sticky footer instead then use the display:table approach mentioned in the link I gave above.

3

If you are happy to leave old browsers behind, I prefer to do this:


body {
background: url(/include/image.jpg);
background-size: cover;
}

That is, you don’t have the image in the HTML at all. There are alternatives to “cover”, but that’s generally the nicest option.

4

I missed the part about the image:blush:

For ie6 just use background-attachment fixed on the body element as that is the only place where fixed works in IE6 although it won’t be stretch to fit as with ‘cover’ ( why the need to support ie6 these days is a bit of a mystery also).