CSS Background Images with Flask

问题

I have read other questions about getting background images in flask to show, but none of the suggested solutions worked for me and I get a 404 error(127.0.0.1 - - [22/Feb/2018 15:13:33] "GET /img/showcase.jpeg HTTP/1.1" 404 -). The jpeg image I want to set as the background is located in the static folder and called showcase.jpeg. Here is my code. Any suggestions? Here's the HTML Link to my style.css:

<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='style.css')}}">

CSS FILE:

#showcase{
  background-image: url({{ url_for ('static', filename = 'showcase.jpeg') }});
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  font-weight: bold;
}

Folders

回答1:

CSS files are read as static files, so you shouldn't be using the url_for method in your CSS.

If your file structure is:

static
  -img
  -css

Just use background-image: url( img/showcase.jpeg )

Relevant SO

回答2:

This is my directory tree structure: directory tree structure

And you could write background-image like this:

background-image: url(../img/nodejsEventLoop.png);

来源：https://stackoverflow.com/questions/48938957/css-background-images-with-flask