title: Is there a way to auto add gradient to images?
body: <p><a href="https://i.stack.imgur.com/1UEMA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1UEMA.png" alt="enter image description here" /></a></p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='my-posts-container' id='&lt;%=postobj._id%&gt;'&gt;
          &lt;%var menuid='menu'+postobj._id%&gt;
          &lt;%var imagesource='../'+postobj.blob.path%&gt;
          &lt;div class="my-posts-container-header"&gt;
               &lt;%-include('postheader.ejs',{friend:postobj.username,postid:postobj._id});%&gt; 
          &lt;/div&gt;
          &lt;div class="menu hide" id="&lt;%=menuid%&gt;" &gt;
              &lt;ul &gt;
                  &lt;li&gt;&lt;button onclick="viewpost('&lt;%=postobj._id%&gt;')"  &gt;view&lt;/button&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;button onclick="removepost('&lt;%=postobj._id%&gt;')"  &gt;remove&lt;/button&gt;&lt;/li&gt;
                  &lt;!-- &lt;li&gt;&lt;button onclick="copypostlink('&lt;%=postobj._id%&gt;')"  &gt;copy link&lt;/button&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;button onclick="editthispost('&lt;%=postobj._id%&gt;')"  &gt;edit&lt;/button&gt;&lt;/li&gt; --&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="post-image" &gt;
              
                  &lt;img src="&lt;%=imagesource%&gt;" alt="image" height="400px" width="400px" style="margin: 5px;object-fit: contain;" ondblclick="like('&lt;%=postobj._id%&gt;')"&gt;
      
          &lt;/div&gt;
         
          &lt;span&gt;
              &lt;%-include('likecommentsharesave.ejs',{postid:postobj._id,username:username,likes:postobj.likes})%&gt;
          &lt;/span&gt;
          &lt;hr&gt;
          &lt;div class="caption"&gt; 
              &lt;%=postobj.caption%&gt; 
          &lt;/div&gt;
          </code></pre>
  </div>
  </div>
  </p>
  <p>I want to keep my image size as 400px *400px
  but add a background colour .post_image div,
  basically, I want to add a gradient to the background based on any image in the image tag, something like this,</p>
  <p><a href="https://i.stack.imgur.com/F4Kzt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F4Kzt.jpg" alt="enter image description here" /></a></p>
  <p>so that the whole 400 X 400  size is covered is this possible to achieve, if not can you suggest me other options, Thanks.</p>