Aligning gradient or framing background images to the bottom of the document <body> can be frustrating since height queries on that DOM element yields a value that’s not the full height of your web browser’s viewport. To have an image stick to the browser’s bottom whilst also considering scrolling, you must use JavaScript to calculate the alignment’s y-height on the fly and reassign the CSS background-position property.

In this example, I’m going to showcase how to support a stickied bottom background image using responsive design. So mobile resources load faster, I’ve optimized custom background images for each of the below CSS media queries:

  • < 640px using bg-bottom-312.png
  • 640px – 960px using bg-bottom-640.png
  • 960px – 1280px using bg-bottom-960.png
  • > 1280px using bg-bottom-1280.png

Below is vanilla JavaScript although I suggest using jQuery to shorten your codebase. e.g., replace addEvent() handling with $().load() and $().resize()