CODEWITHSUNDEEP
pythonflask
e.T55
e.T55

Reputation: 465

Background setting background image in flask

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

Upvotes: 0

Views: 1624

Answers (3)

Chup91
Chup91

Reputation: 66

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.

Upvotes: 0

Ankur
Ankur

Reputation: 310

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?

Upvotes: 0

Matt Healy
Matt Healy

Reputation: 18531

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.

Upvotes: 1

Related Questions