Add Background Image to Webpage

Hello Experts,

I am trying to add a background image to a login page created, however so far unable to do it. My directory structure is as below.

Working directory - /home/test/Sanic
Templates path - /home/test/Sanic/templates
Static Files Path - /home/test/Sanic/static/images/

I tried using all the above paths in the login page as below, however the background image is not applied.

body {
        background-image: url(' /home/test/Sanic/static/images/<image.png>');

Can you show your Sanic app.static route? What matters is not where the files are located, but where they are being served.

Below is my declaration. The image file is placed under /home/test/Sanic/static folder and I want it to appear in the login page route with GET request(/login).

app.static('/static', './static')

@app.route('/login', methods=['GET', 'POST'])

Per @prryplatypus answer on the Discord server:

With this code any file you have in the images directory will be available via /img/<filename.extension>

from sanic import Sanic

app = Sanic("my_app")
app.static("/img", "./images")

So in the HTML you could just do:

<img src="/img/my_image.png"/>
1 Like