dmitryf/elements — Issue #14: Background image plus gradient
Author: marcusatbang
Created: 2012-02-08 10:45:35+00:00
State: open

I find myself need to replace a rule ([originating here](http://wordpress.org/extend/plugins/bp-template-pack/)) that uses multiple backgrounds: an image followed by a gradient.

```css
background-image: url( ../buddypress/bp-themes/bp-default/_inc/images/ajax-loader.gif ),
-moz-linear-gradient(top, #ffffff 0%, #e0e0e0 100%); /* FF3.6+ */
background-image: url( ../buddypress/bp-themes/bp-default/_inc/images/ajax-loader.gif ),
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
background-image: url( ../buddypress/bp-themes/bp-default/_inc/images/ajax-loader.gif ),
-webkit-linear-gradient(top, #ffffff 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
background-image: url( ../buddypress/bp-themes/bp-default/_inc/images/ajax-loader.gif ),
-o-linear-gradient(top, #ffffff 0%,#e0e0e0 100%); /* Opera11.10+ */
background-image: url( ../buddypress/bp-themes/bp-default/_inc/images/ajax-loader.gif ),
-ms-linear-gradient(top, #ffffff 0%,#e0e0e0 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( enabled=0 ); /* IE6-9 */
background-image: url( ../buddypress/bp-themes/bp-default/_inc/images/ajax-loader.gif ),
linear-gradient(top, #ffffff 0%,#e0e0e0 100%); /* W3C */
background-position: 95% 50%;
background-repeat: no-repeat;
```

In other words, the background contains (for supporting browsers) both an image and a gradient. This could be supported by adding something like the following rule:

```css
.gradient-image(@image, @color: #F5F5F5, @start: #EEE, @stop: #FFF) {
background: @color;
background: @image, -webkit-gradient(linear,
left bottom,
left top,
color-stop(0, @start),
color-stop(1, @stop));
background: @image, -ms-linear-gradient(bottom,
@start,
@stop);
background: @image, -moz-linear-gradient(center bottom,
@start 0%,
@stop 100%);
}
```

Used like this:

```css
.gradient-image(url(../buddypress/bp-themes/bp-default/_inc/images/ajax-loader.gif), #fff, #e0e0e0, #fff);
```