Issue
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?
https://www.quora.com/How-do-I-set-a-background-in-CSS-via-Flask
Solution
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:
- Visiting the blog post with id
2:
Answered By - Ahmedur Rahman Shovon
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.