Search code examples
htmlimagergba

Putting an Image behind RGBA

How would I put an image behind, RGBA?

Original Code:

<div style="width: 266px; height: 266px; border: 3px solid red;
  background: 
    linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 49.25%, rgba(0,255,0,1) 50%, rgba(0,0,0,0) 50.75%, rgba(0,0,0,0) 100%), 
    linear-gradient(to top right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 49.25%, rgba(255,230,0,1) 50%, rgba(0,0,0,1) 50.75%, rgba(0,0,0,1) 100%);">
</div>

I changed it to this: It's not working though.

<div style="width: 266px; height: 266px; border: 3px solid red;
  background: 
    linear-gradient(to top left, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(0,255,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), 
    linear-gradient(to top right, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(255,230,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), url(\'http://via.placeholder.com/260x260\');">
</div>
Solution

  • Just remove unwanted \ from image url. Check below snippet for reference.

    <div style="width: 266px; height: 266px; border: 3px solid red;
  background: 
    linear-gradient(to top left, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(0,255,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), 
    linear-gradient(to top right, rgba(225, 225, 225, 0.0) 0%,
           rgba(225, 225, 225, 0.0) 49.25%,
           rgba(255,230,0,1) 50%,
           rgba(225, 225, 225, 0.0) 50.75%,
           rgba(225, 225, 225, 0.0) 100%), url('http://via.placeholder.com/260x260');">
</div>