Showing only part of background image using CSS3

Question

Hi!

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?

Answer 1

Try this:

body { background-image:url('top.jpg'), url('middle.jpg'), url('bottom.jpg'); }

Answer 2

WebKit now supports alpha masks in CSS SVG images can be used as masks. For example, a partially transparent circle.

-webkit-mask-image: url(circle.svg);

http://webkit.org/blog/181/css-masks/

hope this helps.

Answer 3

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/

Answer 4

In Opera you can only use inline SVG in a xhtml page to do that effect. Chuck your image inside SVG, define a mask and do a <use xlink:href="#image" mask="url(#yourmask)"/> to get the effect.