How to link hero image in css for flask application

Question

I am trying to add a hero image on my flask app page. Following is the directory structure for my flask project.

-static
 |--css_files
   |--my.css
 |--images
   |--img.jpg
-templates
 |--layout.html

Now, in order to add a hero image, I have following HTML code in layout.html -

<div class="hero-image">
    <div class="hero-text">
        <h1>My Heading</h1>
        <p>Some paragraph</p>
    </div>
</div>

To add style, I am using following CSS code in my.css -

.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;
}

But, I am only able to see the hero-text and not the image. How can I link this img.jpg into my.css ?

I tried absolute path also, backgrouond: url('/static/images/img.jpg') but didn't work.

Answer 1

像这样更改网址

background:url('../static/images/img.jpg') ;

Answer 2

An option would be to replace the absolute path part with the url_for function, like this:

background:url({{ url_for('static', filename='images/img.jpg') }})

The function converts it into the absolute path for you.

Answer 3

A quickguide to paths

There is three ways to get to your file. Each one depends on the location of your file and your calling point (your html-file).

Abbr: Folder Containing File = FCF. Calling Point (html-file) = CP

url('pathtofile/file.jpg') /* FCF is located in the same folder as your CP


url('../pathtofile/file.jpg') /* FCF is located in a folder containing the folder to your CP. Your path goes ONE step backwards and then forward.


url('/pathtofile/file.jpg') /* This starts the search in the absolute root-folder

You can use both url('../pathtofile/file.jpg') and url('/pathtofile/file.jpg') for your setup.