Background setting background image in flask

Question

Guys i know there are lot of answers for this but it couldn't work for me.i tried to specify the url in the init of the app but still couldn't work for me.Am i missing something? I am trying to change the background to an image

here is my directory

└── wine
    ├── __init__.py
    ├── __init__.pyc
    ├── __pycache__
    │   ├── __init__.cpython-37.pyc
    │   ├── models.cpython-37.pyc
    │   └── routes.cpython-37.pyc
    ├── models.py
    ├── routes.py
    ├── site.db
    ├── static
    │   ├── bg.jpeg
    │   ├── main.css
    │   ├── pexels-photo-935240.jpeg
    │   ├── pexels-photo.jpg
    │   └── sf.jpg
    └── templates
        ├── index.html
        └── rec.html

here is my html file i installed materialize for flask.

    {% extends "material/base.html" %}
{% import "material/wtf.html" as wtf %}
<head>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
    {% block title %}
    Welcome
    {% endblock %}
</head>

{% block content %}

<div class="container">
    <h1>Whats Your Taste</h1>
    <div class="row">
        <form method="POST" action="/">
            {{ wtf.quick_form(form)}}

        </form>
    </div>
</div>

{% endblock %}

my css 'main.css'

body{
    background-image: url({{ url_for ('static', filename = 'bg.jpeg') }});
}

score 1 · Answer 1 · answered Nov 14 '18 at 06:42

1

You can't use Jinja in a static CSS file. You'd need to change the URL reference to an absolute URL or place that CSS rule in your actual Jinja template.

answered Nov 14 '18 at 06:42

Matt Healy

18,033
4
56
56

Ankur · Answer 2 · 2018-11-14T07:58:10.500

0

Try this: background-image: url("bg.jpeg");

You will have to specify the path of the image file. In your design the css and jpeg are inside same folder, hence just mention the image name inside url().

Use jinja for html templates.

See here for how to specify path How to give the background-image path in CSS?

edited Nov 14 '18 at 07:58

answered Nov 14 '18 at 07:09

Ankur

308
1
5

Please add some explanation here and don't just post a link. – Lithilion Nov 14 '18 at 07:14
Updated the answer. – Ankur Nov 14 '18 at 08:23
i still cant find a way to do it – e.T55 Nov 19 '18 at 06:24

score 0 · Answer 3 · answered Mar 29 '23 at 19:43

I'm way late to the party but this worked for me: Inside the base template html add

<style>
    body {
        background-image: url("{{ url_for('static', 
        filename='filename.jpg') }}");
    }
</style>

You also have to put quotations around your Jinja inside the outter url(). It cannot be within your css file as someone has already mentioned. Hope this helps.

Background setting background image in flask

3 Answers3