How to Make CSS Image Sprites Responsive

Leave a comment

Using image sprites with CSS on your website can be extremely useful in decreasing load times on your website and also avoiding flickering upon hover that is often associated with using separate images. But what if your site needs to be responsive? Using a clever bit of code, we can make the background image of a div a sprite that will still work in a responsive design.

Basically all we have to do is apply a class to a div that we want to use. The background of this div will be our CSS sprite. Here would be the code:

div.sprite {

width: 20%;
height: 0;
padding-bottom: 20%;
background-image: url("images/ourimage.png");
background-position: 0 0;
background-size: 200%;


A bit of this code allows the div to maintain its aspect ratio in a responsive design, and then the background image resizes to fill it in. We determine the ratio based on the ratio of the image we are trying to display. You can find out more about maintaining the aspect ratio of an element with css here.

Then we just need to add the last bit of code to change the image in the hover state. All we need to add is this:

div.sprite:hover {

background-position: 100% 0; /* Use ONLY percents here */


Voila! That’s all you need. Note, this may not work quite right in IE8 or earlier. Everything will display, but your images won’t be the correct size most likely. Let me know if you need any more help!


Brian Johnson Blog

Leave a comment

Hey everyone, I now have my own dedicated blog here: Brian Johnson Blog. I will be posting about a lot of the same stuff there so please check it out! For social media services, Netmajic is still alive and well, so please visit them here: Netmajic.

Brian Johnson Design

1 Comment

I (Brian Johnson) have just recently started my own Minneapolis website design company, PageCrafter, and the website is now up and running! Netmajic is still alive and well and I will continue to work closely with Michele there. PageCrafter is just an opportunity for me to reach a different client base than is possible with Netmajic, and also to allow me to explore different areas of website design, particularly graphic design. Eventually I will get a blog going there, too, but in the meantime, you can find my posts right here!

-Brian Johnson

Why Real Names in a Social Network are Good

1 Comment

I posted this in a comment on this page and thought it would be good to talk about here
A little background. Circa 2006. Every high school kid longed to be different and express their differences. So they got a myspace. They chose strange names for their profile, they posted a million pictures filled with ironic and pithy sayings, they made their profiles their own. Pink text over a strobing background of nickleback? Why not, you are expressing yourself. When someone added you as a friend, it might take 20 minutes to figure out who they actually are.

Ugly Myspace Profile

Check out this mashable article that actually touts this as a good looking profile... Imagine what that bad ones must have looked like. 2007

Enter Facebook. Its clean, people use their real names, their profiles look the same, all the information is in the same place for everyone, and it works. It was a huge breath of fresh air for its users. People realized that they don’t want to be assaulted by everyone else’s confusing and frequently obnoxious forms of self expression. And they realized what they valued in a social network was not childish expression, but the socializing itself. And facebook allowed them to do that as efficiently as possible.

Facebook even almost lost that image for a while when apps became an issue, but due to massive public outcry they fixed it.

Now come back to the present. Facebook users still primarily use their real names. But lots of people don’t. Some use their middle names, others use a made up one. Often it is because they don’t want an employer to find them and don’t understand privacy settings. Sometimes it isn’t. But I can tell you that the consensus among many of the most active Facebook users is that it is extremely frustrating when people use fake names. It is a painful reminder of the way things used to be, when you would struggle to connect with somebody as a result of their overzealous self-expression.

I think google realizes all of these things. People don’t want their social network website to be about self-expression. They want it to be about socializing and sharing. Not that there is anything wrong with self-expression, but in this case people see it as getting in the way of what they are there to do.

The fact is that no matter how much you want to express yourself in an unusual way, people don’t want to be forced to constantly wade through everyone else’s self expression as a constant hindrance to actually socializing with them.

To summarize what I believe the sentiment of most social network users is:

You want to express yourself? Write a song, buy some clothes, paint a picture, do something. If I appreciate your brand of self expression, I will check it out. Don’t change the background of your social profile to a band I hate and don’t change your name so I can’t find you.

Google “Default Location” Fixed

1 Comment

A long long time ago, when Google introduced “default location” as an optional entry for Google Maps, it didn’t seem to me to actually be the least bit useful. I am not really sure what its function was on paper, but when I used it, I found it to be essentially worthless. It didn’t make it easier to find directions to or from my location, it didn’t center the map on that location, nor did it seem to remember a single thing about it. I could never even find a shortcut to load up my address on the map. As far as I could tell, literally the only thing that this feature accomplished was to physically list your address somewhere. Just in case you forgot perhaps? Who knows. If there was a way to make it work, I could never figure it out, and I consider myself to be far more tech-literate than the average person.

It would appear that there is finally a point to the default location. Today, Google asked me to enter a default location. Not really sure why it didn’t remember it, given that I am logged in to all my Googles, but I will let that slide. So I tried it. And lo and behold, it works! The map ACTUALLY centers on my default location automatically, and when I click “directions” to a location, it automatically populates the start location with my address. In the past, I used to literally have to type in my full and complete address down to the zip code, otherwise it would use an incorrect location. That became very frustrating. Now, it would seem, I don’t have to worry about that.

Google Map users rejoice, a new age is upon us. Now if they can only fix those momentary outages that seem to happen only when you are in a hurry, I will be a happy man.

Women and Divorce and Some Help

1 Comment

Divorce is often cited as the most difficult life transitions one can face. Today I thought I would briefly share a resource that my friends at Cinder Ventures have put together for women going through this rough time. They have written an excellent book that helps you navigate through everything you may need help with. From legal explanations to financial advice to how to communicate with your kids, they have thought through it all. The book is called Cinder Without Her Fella, and is a light-hearted but practical guide to divorce. You can find more information about the book on their site here:

Women Divorce Book

Cinder Without Her Fella

Google Calendar Appointments: a Half-Baked Plan?


Recently, my Google Calendar alerted me to one of its newest features: an appointment calendar. The idea is simple: Make a list of all the times you are available, make this list available to others, and have them sign up to meet with you whenever they want. It sounded so great, I had to try it immediately. I had even had a conversation with someone earlier in the week about how there should be something exactly like this.

So I set up some appointments. This process is straight-forward enough, though in practice it is a lot of work and fairly time consuming. My goal was to take the days where I have lots of time and break it up in to one hour meetings spaced half an hour apart. Simple enough. But actually accomplishing this is a lot of work… They require you to first create an event, select appointment slot, then change it from the default “offer as slots of 30 minutes” to offer as a single appointment slot. The slots would make sense, but there is no way to use them to space the meetings out. Unless you are in the same building meeting with people with zero downtime between, this is not useful. I could, in theory, select “offer as slots of 90 minutes,” but this would then be confusing to people looking to sign up for an appointment slot. They don’t want to meet for an hour and a half.

So in the end, I had to select all of those options for all 20 slots I might have for a given week. It was repetitive and boring, and it makes me sad to know that if I want to do this in the future I will have to do it all over again. You would think there would be a way to clone the events over and over, but there isn’t. Additionally, if you don’t name each one then a big, ugly “(no title)” appears as the main piece of information for each slot. Why would you name them to begin with? You don’t know for sure what the event is going to be, thats the whole point…

I finished setting that all up. Now all that was left was to send potential meet-ees the worlds longest link to my own appointment calendar. First off, you might want to use a URL shortener for this one, because it is seriously long. It looks like this: (Not a real link). It is anything but pretty. The emails went out fine, and I figured I would just wait.

Within an hour or two, I got many emails back. And this is where I learned the true failure of the appointment calendar. Of the eight or so people who responded, only one had actually gotten through to my calendar. Just one. Why? Because Google did perhaps the most asinine thing they could possibly have done to the system: They require you to log in to your own Google calendar before you can even LOOK at this appointment calendar. Are you kidding me?

So lets walk through what happens when somebody wants to select a time to meet with me. They click the link. What it takes them to is not a page explaining whats going on, where they are, or any relevant piece of information. No. Instead, they are faced with a log-in screen. Most people give up instantly at this point, probably even if they HAVE a Google calendar. It looks like it didn’t work… As if only the owner of that particular calendar can see it. Maybe this would be a good idea if every person on the planet had and was logged in to their own Google calendar. But they don’t and never will. The pragmatic approach would be to let anyone see the calendar without logging in, and even letting people sign up for appointment slots.

The final irony of all this is that when the one person made it through and selected an appointment slot, it showed up as a new event on my calendar, leaving the appointment slot free. Meaning that as far as everyone else is concerned, that time is still available for me. What the heck is the point then? I might get 10 people signing up for the same time, thanks a lot Google. And in a telling twist of fate, the only person who made it through is the owner and sole-employee of an IT services and support company. And even she sounded a little confused.

I can only hope that Google will continue to develop this feature to make it usable… It is a great idea that has been laughably implemented. Stick to emails and phone calls for now, everyone.

Older Entries