Is it possible to show only a part of a backgroundimage when using CSS3? I want to use an image as a background but only show half of it, so is there something like a mask you can define for your backgroundimages?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Is it possible to show only a part of a backgroundimage when using CSS3? I want to use an image as a background but only show half of it, so is there something like a mask you can define for your backgroundimages?
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:
while Safari just uses the shape itself to create clippath from:
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/