Responsive Parallax Images

A Quick Tutorial and Example, All in One

Parallax is all the rage these days, but getting it to work well in responsive environments can be a real pain in the ass. I spent hours banging my head against the wall (and my fingers against my keyboard) trying to come up with a solution that would work well on a big desktop monitor, a tiny iPhone screen, and everything in between. I finally figured it out. And, because I'm a good human, I'm sharing the code with you.

The pure CSS approaches that I saw out there have a lot of limitations. I started down that avenue at first, but soon realized that using a jQuery-CSS combo would be a better bet.

I'll walk you through all the steps in a moment. But first, scroll down and see the demo. While you're at it, resize your screen and see how the photo resizes with it. If that's the effect you're looking for, read on…

Let's go over the CSS first. You'll want to add this within your <head> section (or, better yet, as an external stylesheet):

<style type="text/css">
.parallax_img { 
	height: 500px;
	background-image: url('../images/inkplant/code/chicago.jpg');
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
@media screen and (max-width: 768px) {
	.parallax_img { 
		background-attachment: inherit;

That height is going to get overwritten by our jQuery, so don't worry about it too much. It just needs to be greater than zero.

You'll obviously want to change the background-image to be your own image. If you have multiple images on the page, it'll probably be easier to specify the image URLs inline, rather than giving each image its own class.

The fixed attachment is what gives the parallax effect. This doesn't work on iPhones – along with many other mobile phones and tablets – so we disable it for any screen 768 pixels wide or smaller. (The media query does that part.)

As you might imagine, the background-size adjusts the size of the photo. We're telling the browser to display it at 100% of the width of the div, and then to scale the height automatically…

…But that doesn't scale the height of the div, it just scales the height of the background image. So, if we stopped here, you'd have an experience that works pretty well on big desktops, but that looks awful on smaller screens. That's why we plug in the jQuery:

<script src=""></script>
<script type="text/javascript">
	/* resize the image(s) on page load */
	$(document).ready(function() {

	/* resize the image(s) on page resize */
	$(window).on('resize', function(){

	/* keep all of your resize function calls in one place so you don't have to edit them twice (on page load and resize) */
	function resize_all_parallax() {
		var div_id = 'img1'; /* the ID of the div that you're resizing */
		var img_w = 1000; /* the width of your image, in pixels */
		var img_h = 864; /* the height of your image, in pixels */

	/* this resizes the parallax image down to an appropriate size for the viewport */
	function resize_parallax(div_id,img_w,img_h) {
		var div = $('#' + div_id);
		var divwidth = div.width();
		if (divwidth < 769) { var pct = (img_h/img_w) * 105; } /* show full image, plus a little padding, if on static mobile view */
		else { var pct = 60; } /* this is the HEIGHT as percentage of the current div WIDTH. you can change it to show more (or less) of your image */
		var newheight = Math.round(divwidth * (pct/100));
		newheight = newheight  + 'px';

That could go up in the <head> section, but your page will load faster if you stick it down just before </body>. Feel free to view the source on this page to see the placement of this or any of the other elements.

I included quite a few inline comments jQuery there, so I won't go into too much specific detail on what's happening beyond them. But here's a general overview: We're calling a function each time the page loads or gets resized to figure out the new width of the div (and therefore the background image, as it's 100% the width of the div) and then adjusting the height of the div accordingly. On desktop, we have the div 60% the height of the image so that you get a cool parallax effect. On mobile, where parallax is turned off, we give a div height that's 105% of the image height, in order to provide a bit of padding.

The last thing is the HTML for the div itself, but that's easy:

<div class="parallax_img" id="img1"></div>

The class matches with what we used in the CSS, and the ID matches with what we did in the jQuery script.

With those 3 elements in place, you're pretty much all set. Of course, it gets more complicated when you start adding multiple images and such, but this should give you a good starting point, at least.

Note: If you want to make the image clickable (like, say, if you are putting a big ol' fancy advertisement in the middle of a story), you can just put the <a> tags around the entire div.

Finally, in case you were curious, the photo is one that I snapped from my hotel room on my last trip to Chicago.