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/
