CODEWITHSUNDEEP
background-image
Audrey
Audrey

Reputation: 59

Hide part of background image

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;}

Upvotes: 0

Views: 1992

Answers (1)

mbinette
mbinette

Reputation: 5094

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/

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!

Upvotes: 1

Related Questions