Css image rollovers in a responsive site?

[TheMonk]

Hello,

I've been building responsive sites for a little while now and so far everything is going great. However there's one technique I haven't figured out how to port to responsive and I can't find any sites that tackle it. That is css image rollovers.

Now 5 years ago or so css image rollovers were all the rage. "You don't need javascript to do rollovers!" was the big proclamation, and it was true and everyone was happy. Now in the new jQuery/Responsive reality, I haven't seen anyone try and get this working in a responsive layout.

So here's the problem.

In an old site I'd have a div like so

<div id"home_button"><a href="home.php"></a></div>

And some CSS like so. (This assumes the button has dimensions of 100px x 100px.)

#home_button a:link, 
#home_button a:visited, 
#home_button a:active {
    background: transparent url("../images/home_button_background.jpg") no-repeat scroll 0 0;
    display: block;
    height: 100px;
    text-decoration: none;
    width: 100px;
}

#home_button a:hover{
    background: transparent url("../images/home_button_background.jpg") no-repeat 0 -100px;
}

In a responsive design it's not unreasonable to want <div id"home_button"> to resize dynamically based on device/viewport. However since the background image is based on pixel perfection, how can you resize the div and still get the background to reposition itself as desired?

Challenge: I know you can use things like jQuery etc... to get this working. But using a javascript library to fix something so simple seems like overkill. Preferably I'd like to keep this as simple as possible.

Any thoughts or ideas?

[ralph.m]

In a responsive design it's not unreasonable to want <div id"home_button"> to resize dynamically based on device/viewport. However since the background image is based on pixel perfection ...

You can't have everything.

But there are ways around it depending on the background image. If it were a gradient that goes from top to bottom in the normal state and bottom to top in the hover state, that would be easy, as you'd just have a bigger image than before and position it from the top in one state and from the bottom in another, for example.

Or if it's something like a photo with different states, you can make it much bigger than the button area, so that, if the button expands, you'll just see more of the image.

Are you thinking of a specific example?

[Stevie D]

The biggest problem you've got there is that browsers are not generally all that hot at resizing images on the fly, and I particularly wouldn't want to put that load onto mobile browsers. That means that if you're going to have images that resize, you'll have to resize them beforehand and give browsers the choice of which size image to use (which you can do with media-queries.

If it's the sprite issue that you're worried about, you might be better off using % rather than px to position the background – that could give a better way to centre the image on the element, if that's a sensible design choice.

[TheMonk]

You can't have everything.

I know somedays I wish I could!

Are you thinking of a specific example?

No nothing at the moment really but is it something I've been trying to solve. The article on the front page about resizable background images got me thinking about this problem again.

If it's the sprite issue that you're worried about, you might be better off using % rather than px to position the background – that could give a better way to centre the image on the element, if that's a sensible design choice.

Yeah the % is something I've considered. I'd need to have some empty space between images to make up for scaling issues when the box resizes. You're also probably correct about the different divs and images for different break points. As ralph said, guess I can't have it all. heh.

Thanks to both of you for the feedback!

[ralph.m]

I'm into "responsive design" at the moment (though I don't like the name ... "adaptive" sounds better to me) but I have to admit that I don't see the rollover thing as a problem. I normally only use it on small element anyhow (like a logo) which is fine left at a fixed size. And if you need expanding menus with rollover backgrounds, as said above, the background image can be bigger than needed to accommodate expansion ... as long as the image isn't too fancy.

[Paul O'B]

You could use css3 background size for modern browsers. It would probably be easier to not use sprites for the rollover in this case but use the double stack method and apply the rollover image as a background to the parent and then just hide the anchors background on rollover

This site has some other example.

Of course images scaled by the browsers are never as crisp as those made to measure and indeed for mobile you may want to start with the smallest filesize image by default and then scale up for better devices.