Earlier this month I completed a redesign of a long-time client’s site that I first worked on in 2008. Because the client always has loads of great imagery (she’s an interior designer), we decided to incorporate full-screen backgrounds. I’m using the lightweight jQuery plugin Backstretch to handle the resizing.

I had some problems getting this working in WordPress, so I thought I’d post my process here. The main issue turned out to be that the version of backstretch.js I got from the demo site was not working; I have a correctly-functioning version here to download.

This little script makes images stretch to the full size of the browser window and resize as needed; it works fine down to IE7. I’d recommend an image width of no less than 1440px, this seems to work well.

Adding the Script

Add this to your theme’s functions.php, this registers and loads the backstretch.js script.

Then add this function, this one adds a backstretched image to individual pages which you can control. This one is placed in the footer to make sure it loads after jQuery.

I hope this helps someone else!

If you’re working on responsive websites, you may already be familiar with FitVids – a nice little jQuery plugin that allows for fluid-width video embedding. This morning I found there’s also a FitVids plugin for WordPress. Very easy to use, just install it, activate it, then go to Appearance > Fitvids.

FitVids settingsIf you’re not already using jQuery 1.7+ – and you should be fine if your WordPress install is 3.4 or above – tick the checkbox to add jQuery 1.7.2.

Then under jQuery Selector, enter the container element you want to apply FitVids to. It’s probably .post, but if you’re not sure .body always works. Then save changes and you’re done – FitVids should now be resizing videos as browser size changes.