A CSS Background Image Array (also known as a CSS Sprite) is a single image file that contains multiple graphics within it. Using this image file and the CSS background position property you can update all of your website graphics and page titles by editing one file and without changing any code. This technique can also significantly speed up your website’s loading time and help you automatically organize your website’s graphics.
In the first of this 3-part series we’ll cover the steps required to construct a CSS Sprite including the designing, preparing, and XHTML/CSS programming of a sprite, along with the multiple uses that CSS Sprites can be utilized for.
CSS Sprites have a countless number of possible implementations, I’ve chosen to cover three of what I’ve seen to be the most common uses.
These uses include:
Each of these sprite implementations have their own unique advantages and challenges that result in an ultimate benefit for your website.
In every part of this tutorial series we will cover the following process for each of the three sprite uses:
First, we’ll design and prepare the graphic for our page headers.

Next, we want to create additional page title graphics for our other website pages. Now, instead of creating a new file with the graphic for each page title, we’re going to implement the sprite technique into this single image by positioning our first graphic to touch the top and left edges of the canvas. Then, for each subsequent graphic (or page title) you require, duplicate that initial graphic and place it around 10px directly under the previous graphic (you can use the ruler tool and guides to measure the spaces). Here are some notes:

Next, we’ll crop the extraneous whitespace off the canvas using the crop tool. Finally, we should end up with a completed graphic that looks similar to this:

Now that we’ve constructed a sprite, we can move on to integrating it into our website.
Here is the XHTML code we’ll be using on each page to display it’s corresponding graphic from the sprite:
<div id="page_title">
<h1 id="home_title">Home</h1>
</div>
As you may notice, this greatly resembles a normal looking page header without the use of a sprite, keeping our titles valid and SEO-friendly. Repeat this code on each page of your website that you have a title for and edit the h1’s id and text to correspond with the name of the page (Ex:
<h1 id="about_us_title">About Us</h1>for your about us page).
The CSS for this sprite consists of three element styles:
div#page_title {
display:block;
height:40px; <-- The height of each sprite + the whitespace below it
margin:0 0 0px;
}
div#page_title h1 {
width: 215px; <-- The width of your sprite image
height: 30px; <-- The exact height of each sprite
text-indent: -7777px;
background-image: url('../images/sprite.jpg'); <-- The image file
background-repeat: no-repeat;
}
h1#home_title { background-position: left top; }
h1#about_us_title { background-position: left -30px; }
The first element: div#page_title, defines the container that encompasses the page title. Here is where you can add padding and margins that will affect the overall style and positioning of the sprite.
The next element: div#page_title h1, defines the properties of each sprite, such as the height, width and the location of the sprite image. The “text-indent” property is used in this element to hide the text within the h1 tag, but still keeping it visible to search engines by not removing it completely.
The last elements h1#home_title and h1#about_us_title, define the position of the background image in relation to the sprite image. For the sprite used in this example, each page title graphic is 30px in height with 10px of whitespace below it. The first title graphic in our sprite is for our home page, this means, for our h1#home_title element we can simply set the background-position to left and top. Next, our about page graphic is placed under our homepage graphic making things a bit tricky. To position this title and subsequent titles, we’ll note the height of each graphic from our CSS (30px) then set the background position to left and -30px to move the background image up by 30px, as a result, displaying the portion of the graphic with our about title instead of the homepage title.
Now, if you have another graphic in the sprite under about us, for example, named contact us, simply duplicate the HTML above, fill in the h1’s details and create a new element with the name h1#contact_us_title and set it’s background position to left and -60px in your CSS file and repeat as necessary.
Tip: To get the exact dimensions for the sprites used in the CSS, use the ruler tool in Photoshop (command + i (mac) / ctrl + i (windows)).
Here’s an example of an implemented page title sprite.

View This Theme on ThemeForest
When it comes time to update your website’s look, sprites make is extremely painless. Simply, open your sprite image file, update each graphic title with your new styles and save this over your old sprite file. Congratulations! You’ve just updated all your websites page titles by editing one file and without changing any code.
Now that we’ve covered the basic concept of creating and implementing a sprite for our page titles, in the next tutorial, we’ll create a multiple-state menu / navigation system using the CSS Sprite technique.
While preforming some intense, in-depth changes for the upcoming release of 72photos I had a small, yet significant epiphany about the standards (or lack of standards) on social network websites and basically any user-content driven website. My epiphany being: These websites are generally ugly and lack a consistent, quality experience.
I became increasingly aware of this when the XMG team and I we’re brainstorming new ways to aggregate users data to create unique avenues for users to explore and browse through content on 72photos. Though, we came up with a myriad of great concepts, unforeseen problems arose late in development. We found the more user-uploaded content we featured, whether it be photos, galleries, or profiles; the more it began to affect the overall quality of the website, and not for the better. This was due mainly to the unpredictability of user content.
Then, I’ve begun to notice this trend throughout the larger, more prominent social websites…The more user content they displayed on their website, the more it affects the overall website quality. After some further research, I’ve reduced this down to 3 factors:
So, how does one strive towards displaying all their aggregated user-data while keeping the high quality and standards of one’s website? Not easily…However, here are a few methods that 72photos employed and you can implement to overcome some of these drawbacks:
With a little foresight and some CSS / Javascript trickery you can easily re-gain control of your social website’s design standards. The suggestions above are just a few of many ideas you can implement to keep the design of your site flowing with consistent quality by the end of the week—Win-win.
It’s been a good run with my ol’ MacBook Pro, however, I couldn’t resist the temptation of the new mercury-free, multi-touch, MacBook Pro goodness.
Anyone in the market for a gently used MacBook Pro? Oh, you are? Excellent! Check out the auction!
OnLooker is a simple rails plugin that lets a user check the status of his or her website or server. OnLooker uses Ping’s to check via TCP or HTTP whether the site, sites or servers that you specify are online and accessible. OnLooker also supports custom images to distinguish status.
Check out the demo or grab the source.
Have an issue / suggestion for the plugin? drop me a comment below.
After spending 7 painstaking hours attempting to get Rails + Passenger (mod_rails) going on a (dv) VPS I have, I decided to post up my procedure for getting this going (sans the hours spent researching).
This setup wont change much of your current setup, whether it’s a new (dv) or one you’ve been using for a while. I personally preformed the following on my 1 month old, fairly untouched, v3.5 (dv).
Prerequisites
Developer Tools – Install Guide.
yum remove ruby
cd /opt
wget ftp://ftp.ruby-lang.org:21/pub/ruby/1.8/ruby-1.8.6.tar.gz
tar -zxvf ruby-1.8.6.tar.gz
ln -s ruby-1.8.6 ruby
cd ruby
./configure && make && make install
cd ../
wget http://rubyforge.org/frs/download.php/45905/rubygems-1.3.1.tgz
tar -zxvf rubygems-1.3.1.tgz
cd rubygems-1.3.1
ruby setup.rb
gem install rails (unless already installed)
gem install passenger
passenger-install-apache2-module
Step 5: chown -R {your_domains_username} {your_rails_app}
service httpd restart
Your Done!
Tips: Ensure your app’s directory is owned by it’s domain’s respective owner, since passenger runs as the apps owner.
In regards to my last blog post, I’m continuing my quest to release open-source snippets and tid-bits of code I’ve used in my various projects.
To better facilitate my newly founded altruistic views, I’ve put together little space to display my current list of plugins and perhaps even a demo or two.
Without further adieu…
plugins.two2twelve.com Is online!
There, you’ll notice my most recent (and currently only) plugin CleverValidation; Do away with the default (and unattractive) Rails validation methods and sexify your validations with CleverValidation. Try out the demo here or go straight to the source.
Any issues with the plugin? Think it could be sexier? Let me know in the comments section.