CODEWITHSUNDEEP
htmlcss
todd.pund
todd.pund

Reputation: 689

Background image under transparent RGBA gradient

I'm designing the header for a web site. I'm trying to use an image on the right side of the header with a gradient color over the top of it with the rgba of the right side set to a level of transparency. Individually the image shows and the gradient works fine, but the image and the gradient do not work together, only the gradient shows up with the transparent color letting white show through, but no image.

Here is my code.

.header-container {
    background: url('banner-background.PNG') right top no-repeat;
    background: rgb(86,0,0); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(86,0,0,1) 0%, rgba(126,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(126,0,0,0)), color-stop(100%,rgba(86,0,0,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Opera 11.10+    */
    background: -ms-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 */
}

Upvotes: 1

Views: 175

Answers (1)

Anonymous
Anonymous

Reputation: 10216

You could do this like below CSS to combine a background image and CSS3 gradients:

.header-container {
  background: rgb(86,0,0); /* Old browsers */
  background: url('banner-background.PNG') right top no-repeat, -moz-linear-gradient(left,  rgba(86,0,0,1) 0%, rgba(126,0,0,0) 100%); /* FF3.6+ */
  background: url('banner-background.PNG') right top no-repeat, -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(126,0,0,0)), color-stop(100%,rgba(86,0,0,1))); /* Chrome,Safari4+ */
  background: url('banner-background.PNG') right top no-repeat, -webkit-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
  background: url('banner-background.PNG') right top no-repeat, -o-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* Opera 11.10+    */
  background: url('banner-background.PNG') right top no-repeat, -ms-linear-gradient(left,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* IE10+ */
  background: url('banner-background.PNG') right top no-repeat, linear-gradient(to right,  rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 */
}

[EDITED] (Gradient over background image)

.header-container {
  background: rgb(86,0,0); /* Old browsers */
  background: -moz-linear-gradient(left, rgba(86,0,0,1) 0%, rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(126,0,0,0)), color-stop(100%,rgba(86,0,0,1))), url('banner-background.PNG') right top no-repeat; /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* Opera 11.10+    */
  background: -ms-linear-gradient(left, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* IE10+ */
  background: linear-gradient(to right, rgba(86,0,0,1) 0%,rgba(126,0,0,0) 100%), url('banner-background.PNG') right top no-repeat; /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f4c6b', endColorstr='#3f4c6b',GradientType=1 ); /* IE6-9 */
}

Upvotes: 2

Related Questions