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.

Side Menu screenshotEarlier this week I built a little menu for a client using some CSS3 animation techniques – no Javascript. The client decided on Thursday she’d rather have the menu at the top, so… I liked mine quite a lot and turned it into a tutorial here so I reproduce it quickly when the need arises.

The menu was designed to work nicely with a full-screen background image. You can easily customize it to work with a variety of sites though.

The demo linked below shows the menu based on the one I made for my client.

View Demo

Basic Menu Setup

The parts that are highlighted are key, the rest is just a very simple menu structure.

In line 13 I’m using a semi-transparent white .png for the background of the menu items. In line 21, I move the a to the left 20px, the same distance I’ll be sliding the a’s to the right; this is so the left side of the menu item stays at the edge of the browser window when the menu item moves right, otherwise there’ll be a gap there.

Lines 27-31 control what gets animated when the user moves the mouse away from the menu item – what happens when the menu item slides back to the starting point (both the color and the translation movement) and how long it takes (0.4 seconds).

Hovers and Current Menu Item

Lines 4-6 control the distance moved (20px in the X direction, 0 in the Y) for hovered and active menu items. Likewise, lines 17-19 do the same for the current menu item.

The rest of the highlighted lines control what transitions when the user hovers or clicks a menu item. The current menu item is moved to the right (X) by 20px, but it doesn’t need a transition statement because no animation is needed.

A pretty simple example, but it works effectively and looks pretty nice. Enjoy!

If you’re a subscriber to position: relative’s RSS feed, please read this carefully. I want to keep you!

I’m switching from Feedburner to Feedblitz to manage the RSS feed mainly because Google’s support for Feedburner is being dialed down very quickly; Feedburner may not be in existence for too much longer.

Please do me a favor and re-subscribe to the feed by going to this link:

http://feeds.feedblitz.com/position-relative

Your subscription should continue uninterrupted. Thanks!

Have a private blog category only visible to logged-in members of your blog or website? You can hide that category so that it doesn’t show up in your site’s default feed. Just add this to your theme’s functions.php file:

If you need to exclude more than one category, just add more like this: