0

I've got a set of buttons on my page that have the same gradient background, applied via class "blue." id like to add in different background images for each one, laying them on top of the gradient without having to individually code each one with the gradient and background image options.

Transparent Background Image with a Gradient this question shows a method of gradient + image, but requires that each of the buttons have the gradient applied individually. proof of concept at least.

any way to combine them?

CSS:

       .blue {
            background:#3c4658;
            background:-moz-linear-gradient(top, #3c4658 0%, #1c222e 50%);
            background:url('../img/stop.png') 0 0 no-repeat,
            -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c4658), color-stop(50%,#1c222e));
            background:url('../img/stop.png') 0 0 no-repeat,
            -webkit-linear-gradient(top, #3c4658 0%,#1c222e 50%);
            background:-o-linear-gradient(top, #3c4658 0%,#1c222e 50%);
            background:-ms-linear-gradient(top, #3c4658 0%,#1c222e 50%);
            filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3C4658', endColorstr='#1C222E',GradientType=0 );
            background:linear-gradient(top, #3c4658 0%,#1c222e 50%);
       }
       a.jp-stop {
            background-image:url("../img/stop.png");
            width:35px;
            height:23px;

       }
Community
  • 1
  • 1
technopeasant
  • 7,809
  • 31
  • 91
  • 149

2 Answers2

1

You can use Gallagher's CSS2.1 way of applying multiple backgrounds, with pseudo-elements: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Also, it's a very bad idea to use presentational class names like "blue". What if in the future you want it to be red? Change the markup?

Lea Verou
  • 23,618
  • 9
  • 46
  • 48
-1

Theoretically you should be able to have a class for each button that just applies background-image.

Eg

.button1 { background-image: url(foo.png); }

Then in HTML

<button class="blue button1">my button</button>
isNaN1247
  • 17,793
  • 12
  • 71
  • 118