Search code examples
htmlcssflaskbackground-image

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

Solution

  • 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

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

    Relevant SO