On May 19, 2012, at 20:30 , David Laakso wrote: > On Sat, May 19, 2012 at 2:58 PM, meera kibe <meera_k...@yahoo.com> wrote: > > I want to implement the following: > A image merged with a background with gradient. Something similar to > http://www.sittercity.com/au-pair in the "Find available au-pairs". > I would appreciate any advice > Thanks > Meera > > You might consider using CSS3 for the gradient. > Please see the .box_gradient {..} generator here: > <http://css3please.com/> > Silhouette the image with a transparent background and use absolute > positioning top right to put it on top of the gradient box. >
By taking David L. suggestion: About the CSS3 options, if you need to play on the background with both, image and gradient, this may work: I.e - an image on our background, on the bottom left of a given container, and a gradient from right to left. background-color: #f6f6f6; background-position: bottom left; background-repeat: no-repeat; background-image: url(image_url), -webkit-gradient(linear, right, left, from(#f6f6f6), to(#fff)); /* Saf4+, Chrome */ background-image: url(image_url), -webkit-linear-gradient(right, #f6f6f6, #fff); /* Chrome 10+, Saf5.1+ */ background-image: url(image_url), -moz-linear-gradient(right, #f6f6f6, #fff); /* FF3.6+ */ background-image: url(image_url), -ms-linear-gradient(right, #f6f6f6, #fff); /* IE10 */ background-image: url(image_url), -o-linear-gradient(right, #f6f6f6, #fff); /* Opera 11.10+ */ background-image: url(image_url), linear-gradient(right, #f6f6f6, #fff); Cheers, mem ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/