Currently, I am working on designing the header of a website. My goal is to incorporate an image on the right side of the header, overlayed with a gradient color that has a certain level of transparency set using rgba values. Although the image and gradient individually display correctly, they do not appear together as intended. Instead, only the gradient shows up with transparency allowing white to show through, but no image.
Shown below is the code snippet:
.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%);
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 */
}