Question

I’ve got a div with a background image that includes both the normal and hover state, so when you mouse over, the bottom half of the background image is shown. I’m making a mobile version of the same site, and I’d like for only the first half of the image to be shown as the same div grows in height. However, as it is currently, when the div grows, I obviously see the second half of the background image. Any thoughts on how to hide the bottom half of the background image while still showing the top?

.community a{background: url(images/migtea.jpg) 0 0 no-repeat #FFF; display:block;       float:left; margin:0 10px 10px 0; padding: 10px 10px 10px 151px;}
.community a:hover{background-position: 0 -131px;}

Answer 1

Well only problem is that “clip-path”, “mask” and “filter” (no not the
IE “filter” but SVG “filter”) only works for Firefox and Safari (yes
no Chrome). And they do it differently. Firefox needs an svg clippath
specified via an id eg:

.box { clip-path: url("roundedrect.svg#cp1"); } 

while Safari just uses
the shape itself to create clippath from:

 .box { clip-path: url("roundedrect.svg"); } 

I have yet to discover a
way to do it in Opera and Chrome.

But for FF and Safari “cross browser” example i have created this:
http://tokimon.dk/testing/css-svg-test.html.

Otherwise maybe you can get something out of the background
manipulation in CSS 3: http://www.css3.info/preview/

• Tokimon
  (source: Showing only part of background image using CSS3)

Else, all you can do is either separate the background images, or put a container (div) with a solid background over it and “hide” the part you want to hide (but it’s not a very elegant solution)!

Hope this helps!