Stylesheet url_for code for image in a parallel folder

Question

I am attempting to build a website using Flask. I am using Python 3.9 I have the following directory tree:

environment/
    main.py
    app.yaml
    requirements.txt

    Templates/
        base.html      #base template
        index.html     #extends base.html

    Static/
        css/
            main.css
        images/
            favicon.ico
            bckgrnd.jpg
        fonts/
            Carolingian.ttf
            Latin.ttf

Here is the code in main.py:

from flask import Flask, url_for, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(debug=True)

I have been trying to set the background image for my website. In "main.py", I have imported url_for, and I know that it works because I can get it to work for my favicon, which is coded in the HEAD section of the base.html template. Additionally, I have tested my background image in the base.html template with the code:

<BODY style="background-image: url({{ url_for('static', filename='/images/bckgrnd.jpg') }})">

This code works successfully. However, I would prefer to move this styling to my stylesheet. I also expect to run into the same problem when I implement my custom fonts, which are essential to the correct functioning of the webapp. I have tried to implement the same code in the stylesheet:

body {
  background-color: rgb(180,160,120);
  background-image: url({{ url_for('static', filename='/images/bckgrnd.jpg') }});
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  }

However, the background does not appear (the rest of my stylesheet is working fine, including the background color, so no problems there). My terminal informs me that it is not looking for bckgrnd.jpg in the images folder, but in the css folder:

127.0.0.1 - - [07/Jul/2021 10:19:56] "GET /static/css/bckgrnd.jpg HTTP/1.1" 404 -

I don’t understand why it would look in the css folder for the image, rather than in the images folder or some subfolder of css called images (which doesn’t exist), since I have clearly indicated that the file is in a folder called images, but I suspect that the reason why the code works in the base.html template inside the BODY tag but not in the stylesheet might be because the stylesheet is already in the static folder (and furthermore, within a subfolder of the static folder), while the base.html template is outside the static folder.

I have attempted to emmend the code to look in a parent folder:

body {
  background-image: url({{ url_for('static', filename='/../images/bckgrnd.jpg') }};
  }

But this code makes no difference to either the appearance of the webpage or the information in the termincal. It is still looking for the file in the css folder and not the images folder.

What am I missing?

Asked By: M. Nace

||

Source

Answer 1

You are already in static when you’re in the CSS file. So why not write the path directly:

body {
  background-image: url('/static/images/bckgrnd.jpg');
}

You should also try url({{ url_for('static', filename='images/bckgrnd.jpg') }});. Notice the missing forward slash in front of images. If that doesn’t work it means Jinja is used only on the file that’s used as input in flask’s render_template.

Answered By: marianstefi20

Stylesheet url_for code for image in a parallel folder

Question:

Answers: