Background won't run with flask


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>

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

    <link rel="stylesheet" href="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

      <h1>Animated something</h1>
    {% block content %}
    {% endblock content %}

    <script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


@import "";

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


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

    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;

    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{
        background-position: 0 50%;
        background-position: 100% 50%;
        background-position: 0 50%;


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


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:

        - base.html
        - 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 🙂

Answered By – Abdulrahman Alshehri

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published