title: How to link hero image in css for flask application
body: <p>I am trying to add a hero image on my flask app page. Following is the directory structure for my flask project.</p>
  
  <pre><code>-static
   |--css_files
     |--my.css
   |--images
     |--img.jpg
  -templates
   |--layout.html
  </code></pre>
  
  <p>Now, in order to add a hero image, I have following <code>HTML</code> code in <code>layout.html</code>-</p>
  
  <pre><code>&lt;div class="hero-image"&gt;
      &lt;div class="hero-text"&gt;
          &lt;h1&gt;My Heading&lt;/h1&gt;
          &lt;p&gt;Some paragraph&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To add style, I am using following <code>CSS</code> code in <code>my.css</code>-</p>
  
  <pre><code>.hero-image {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url({{ url_for('static',filename='images/img.jpg') }});
      /* Set a specific height */
      height: 50%;
      /* Position and center the image to scale nicely on all screens */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
  }
  </code></pre>
  
  <p>But, I am only able to see the <code>hero-text</code> and not the image.
  How can I link this <code>img.jpg</code> into <code>my.css</code>?</p>
  
  <p>I tried absolute path also,<code>backgrouond: url('/static/images/img.jpg')</code> but didn't work.</p>