Using CSS To Create a Fixed, Content-Overlapping Footer

In this tutorial, I demonstrate how to create a footer that features an image that is (1) always positioned on the bottom of the screen and (2) that slightly covers some of the content area to create a nice design overlay.

Aside from the image creation in Photoshop, I only use CSS and HTML to create this page.

This tutorial continues where the previous left off, with some minor formatting modifications. To see the previous tutorial, visit:
http://www.youtube.com/watch?v=Wbp_FBdUgj8

In the video, I mention that I will touch on why I use Portable Network Graphics (PNGs), but I forgot to mention it. Basically, the upsides to this image format are a relatively small file size and support for transparency.

Please note that this tutorial features one of several methods available to create a fixed, overlapping footer. You will have to tailor your footer width, height, and position for your own needs.

Category:

Education

Tags:

• WeArePurpose
• CSS
• fixed
• footer
• content
• overlapping

[DramaTiqq]

Just do a bottom padding of 100 px and you will never have that issue. Just sayin'.

[ScienceAndTrue]

Great, thanks



[UltimateRevenger]

thanks .. was helpful

[1337N3RDRAG3]

Thanks alot!!! this really helped me out with my new web site.