Background won't run with flask

Question

I have this application and I made an animation background and when I open the HTML in chrome so it works well but then when I run it with flask It doesn't add the background and just ignores it It's probably something that I missed but I still can't understand why it doesn't load the background

HTML - 1:

<!doctype html>
<html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

    <title>Covid-19</title>
  </head>
  <body>
    <section>
      <h1>Animated something</h1>
    </section>
    
    {% block content %}
    {% endblock content %}

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CSS:

@import "https://fonts.googleapis.com/css?family=Lato:100";

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html{
    font-size: 10px;
    font-family:  "Latop", Arial, sans-serif;
}

section{
    width: 100%;
    height: 100vh;
    color: #fff;
    background:  linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    position: relative;
    animation: change 10s ease-in-out infinite;
}

h1{
    font-size: 5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 3px solid #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5rem 10rem;
}

@keyframes change{
    0%{
        background-position: 0 50%;
    } 
    50%{
        background-position: 100% 50%;
    }  
    100%{
        background-position: 0 50%;
    }  
}

Python:

from flask import Flask, render_template, request
def create_app():


    app = Flask(__name__)

    @app.route('/', methods=['POST', 'GET'])
    def home():

            
        return render_template("base.html")
     
    return app

why are you declaring `app = Flask(__name__)` inside a function. And this is all your python code?? — Kunal Tanwar, Aug 26 '21 at 17:07
I am running it on other file but it is not what is matter here @Kunal Tanwar — Itamar, Aug 26 '21 at 17:08
Can you also post an image of your folder structure?? And entire python code?? — Kunal Tanwar, Aug 26 '21 at 17:11

score 0 · Accepted Answer · answered Aug 26 '21 at 17:21

It's due to the server being unable to locate the style.css file. To fix this, make sure your static files are located inside a folder named 'static' next to your flask application python file. something like this:

/app
    - app.py
    /templates
        - base.html
    /static
        - style.css

And to easily link the files in the templates using:

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

Check Flask's docs for more details

Good luck :)

Background won't run with flask

1 Answers1