Add Background Image to Webpage

#1

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>');
}
#2

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

#3

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'])
#4

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")

app.run()

So in the HTML you could just do:

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