Transparent image pattern over color in CSS

Question

I'm trying to add a simple .png pattern over a color gradient in CSS. Here is the markup:

HTML:

<div class="pattern">
  <div class="widget_heading">
    <h4>Feed</h4>
  </div>
</div>

CSS:

.pattern {
 background: url(../img/leatherpattern.png) repeat;
 }

.widget_heading { 
  display:block; border:1px solid #3F943A; height:40px; border-top-left-radius: 5px  5px;
  border-bottom-right-radius: 5% 0%;
  border-top-right-radius: 5px; background: #3c8522; /* Old browsers */
  background: -moz-linear-gradient(top,  #3c8522 0%, #599d40 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3c8522), color-stop(100%,#599d40)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #3c8522 0%,#599d40 100%); 
  background: -o-linear-gradient(top,  #3c8522 0%,#599d40 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #3c8522 0%,#599d40 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #3c8522 0%,#599d40 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c8522', endColorstr='#599d40',GradientType=0 ); /* IE6-9 */
  }

I have no idea why it's not showing up overtop, but it is showing up. Any help would be appreciated, thanks!

http://jsfiddle.net/j4JjW/3/

looks like you can't have gradient and background picture at the same time — btevfik, Mar 20 '13 at 00:29
look at this http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients — btevfik, Mar 20 '13 at 00:30

score 0 · Answer 1 · answered Mar 20 '13 at 00:48

Both your gradients and your image are not at all transparent, so it is not possible to see both when they are taking up the same space. As you can see here the gradient just covers up the image, and the same would be true in the reverse. You need to give one of the two some transparency (and put it on top).

Transparent image pattern over color in CSS

1 Answers1