CODEWITHSUNDEEP
htmlcsspython-3.xflask
saurabh sisodia
saurabh sisodia

Reputation: 312

Background Image is not displaying in flask

Here is my html template homepage.html in /home/saurabh/flask/templates

<!DOCTYPE>
<html>
<head>
<title>homepage</title>
<style>
body{
        background-image:url("/home/saurabh/Pictures/599783.jpg");
        background-attachment: fixed;
    }
</style>
</head>
<body>
    <h1>Welcome to our Homepage</h1>
    <h3>We will try to make u happy <strong>YOU</strong></h3>
    <nav>
        <a href="login.html">LOGIN</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="signup.html">SIGNUP</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="about.html">ABOUT US</a>
    </nav>
</body>
</html>

and this is my python script to render above template in /home/saurabh/flask

from flask import Flask,render_template
app=Flask(__name__)
@app.route('/')
def home():
    return render_template("homepage.html")
if __name__=="__main__":
    app.run(debug=True)

Everything is working fine but background-image.I have already tried using static directory but nothing worked. Background-image is not displaying in web browser??

Upvotes: 1

Views: 1083

Answers (2)

N.P
N.P

Reputation: 36

You can call image from web server instead of flask default web server for your files.

http://www.yoursitename.com/images/image.jpg

Refer Flask Documentation to solve this image issue

Upvotes: 0

v25
v25

Reputation: 7621

You need to create a directory called: /home/saurabh/flask/static

Move the background image file to that directory.

Then change the line in your template file to:

background-image: url("{{ url_for('static', filename='599783.jpg') }}");

Upvotes: 1

Related Questions