CSS3 Background gradient on top of an image

2011
08
November
1:52 pm

In CSS3, it is possible to place a background image beneath a transparent gradient.

This is achieved simply by including multiple statements within the background property.

However, CSS reads from the right to the left, so the property at the end of the list will display on top.
So, we include the background image last to have it appear behind the gradient:

background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 90%),
url('http://IMAGEURL.jpg') repeat;
Posted in: Design
Tagged with:
Download
Source

Comments

  1. needed this, thanks

Leave a Reply to ockert van schalkwyk Cancel reply

Your email address will not be published. Required fields are marked *