Gradient Overlay on Image with Single Line of CSS

How do I combine a background-image and CSS3 gradient on the same element?

Multiple backgrounds!

body {  background: #eb01a5;  background-image: url("IMAGE_URL"); /* fallback */  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */}

CSS background gradient with image overlay

You're overriding background by setting background-image. Instead you need to use multiple backgrounds:

background-image: url('../images/logo.png'), linear-gradient(#3C3E89, #6265E4);

According to documentation backgrounds are drawn from closest to most distant. So in your case image should came first to be drawn over gradient.

CSS - Linear gradient transparency on both side of image

You could use a wrapper div and then use color stops:

div {  position: relative;  display: inline-block;}div:before {  content: "";  top: 0;  left: 0;  position: absolute;  height: 100%;  width: 100%;  background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);  /* FF3.6+ */  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));  /* Chrome,Safari4+ */  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);  /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);  /* Opera 11.10+ */  background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);  /* IE10+ */  background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);  /* W3C */  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);  /* IE6-9 */}

<div>  <img src="http://placekitten.com/g/300/300" alt="Sample Image" /></div>

Use css gradient over background image

Ok, I solved it by adding the url for the background image at the end of the line.

Here's my working code:

.css {
  background: 
   linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
   url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

<div class="css"></div>

Diagonal lines/texture overlay on background gradient/image

A CORRECT SOLUTION:

jsFiddle: If you're not seeing the diagonal lines, it's because jsFiddle doesn't really like external links to hosted images from imgur. Just copy and paste the imgur url in another tap to get it in your cache, then reload the Fiddle.

The key to the solution is the relative positioning of the color background, and the absolute positioning of the texture/line overlay. For future visitors to this post, if you want to overlay a texture on an image, apply:

position:relative

...to your image div, and:

position:absolute

...to your overlay div.

<div id="alert">
    Text goes here!
    <div class="lines"></div>
</div>

---

#alert {
    position:relative;
    padding:10px;
    box-shadow:0px 1px 1px #000,  0px 1px 1px #F5BFB1 inset;

    background: #ea765a; /* Old browsers */
    background: -moz-linear-gradient(top,  #ea765a 0%, #d2583b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea765a), color-stop(100%,#d2583b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ea765a 0%,#d2583b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea765a', endColorstr='#d2583b',GradientType=0 ); /* IE6-9 */
}

.lines {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:url(../img/lines.png);
    opacity:0.05;
}

Parallax image with gradient overlay

A gradient is considered to be a background image. You are setting this on .jumbotron, and then overwriting it by way of inline style with a jpg.

To accomplish the effect you are trying for, set .jumbotron to position: relative;, set .jumbotron > .container to position: relative; z-index: 2 and add an extra direct child to .jumbotron with the following (simplified) CSS:

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: linear-gradient(rgba(20, 20, 20, 0.3), rgba(20, 20, 20, 0.3));

Background image with gradient overlay React

You can go the CSS variable way. This codepen demonstrates.

Basically, in the React file:

<div style={{"--img": "url('https://images.unsplash.com/photo-1610907083431-d36d8947c8e2')"}}>text</div>

And, in CSS:

background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), var(--img);

If the gradient must also be dynamic, a similar approach should work still.

---

Related Topics