CODEWITHSUNDEEP
htmlcssflaskjinja2
Frank AK
Frank AK

Reputation: 1781

How to set background image dynamically in Jinja2?

I am building my personal website, which require to set a background. I can do it with following way.

 <header class="masthead" style="background-image: url('img/about-bg.jpg')">

But, since I am using Flask with Jinja2. So I'd like to make it dynamically.

<header
  class="masthead"
  background="{{url_for('static', filename='css/post-bg-01.jpg')}}"
>

Sadly, it doesn't work for me. So I try to google find some similar Q/A, but it does figure out my problem at the end. I hope I can load my image with its own image. so it might like:

For post-01

<header
  class="masthead"
  background="{{url_for('static', filename='css/post-bg-01.jpg')}}"
>

For post-02

<header
  class="masthead"
  background="{{url_for('static', filename='css/post-bg-02.jpg')}}"
>

Anyone can help me?

jinja2 set background image

https://www.quora.com/How-do-I-set-a-background-in-CSS-via-Flask

Upvotes: 1

Views: 2330

Answers (1)

arshovon
arshovon

Reputation: 13651

We can pass the image filename or filepath from Flask app to the template and render the image as background of any HTML element.

Here I am showing an example of passing the blog id and filename from Flask app to template. The images are stored in static folder.

Directory structure:

├── app.py
├── static
│   └── images
│       ├── 1.jpg
│       └── 2.jpg
└── templates
    └── blog.html

app.py:

from flask import Flask, render_template


app = Flask(__name__, static_folder='static')

@app.route('/blog/<int:blog_id>')
def show_post(blog_id):
    filename = "{}.jpg".format(blog_id)
    return render_template('blog.html', blog_id=blog_id, filename=filename)

blog.html:

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Flask Dynamic Background in Bootstrap Jumbotron</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <main role="main">
    <section class="jumbotron text-center" style="background-image: url({{url_for('static', filename='images/'+filename)}})">
      <div class="container" style="color: white;">
        <h1 class="jumbotron-heading">Example Blog Post No: {{ blog_id }}</h1>
        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
        <p>
          <a href="#" class="btn btn-primary my-2">Main call to action</a>
          <a href="#" class="btn btn-secondary my-2">Secondary action</a>
        </p>
      </div>
    </section>
  </main>
</body>
</html>

Output:

  • Visiting the blog post with id 1:

blog post 1

  • Visiting the blog post with id 2:

blog post 2

Upvotes: 3

Related Questions