1

I am new to Flask and trying to add a background image to all of the pages of my web app. I have saved the background image as 'background-image.jpg' in an 'images' folder within a 'static' folder, in the project. Here is my 'base.html' file which is extended to all my other files.

{% extends 'bootstrap/base.html' %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom-styles.css') }}">


{% block title %}
Flog
{% endblock %}

{% block head %}
{{ ckeditor.load() }}
{{ super() }}
{% endblock %}

{% block navbar %}
    {% include '_navbar.html' %}
{% endblock %}


{% block content %}
<div class="jumbotron background-img">
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
            <div class="alert alert-{{ category }}" role="alert">
                {{ message }}
            </div>
            {% endfor %}
        {% endif %}
    {% endwith %}    
    {% block sub_content %}
    {% endblock %}
</div>
{% endblock %}

And here is my css file, saved in a 'css' folder within the 'static' folder named 'custom-styles.css'.

.background-img{
    background-image: url('..images/background-image.jpg');

}

When I run the app, the jumbotron is working but it just shows a grey box and no background image. Is anybody able to tell me what I am doing wrong?

Thanks.

watermelon123
  • 357
  • 2
  • 3
  • 12
  • The url is wrong. The `..images` type syntax is python specific. Try `../images/background-image.jpg` or `/static/images/background-image.jpg` – Robert McKee Feb 20 '20 at 16:43

2 Answers2

0
.background-img{
background-image: url('../images/background-image.jpg');
}

Try adding the forward slash after the two periods, it looks like it might just be an issue with how the css file is accessing the images folder.

lincolnck
  • 302
  • 1
  • 12
0

The path to your background image needs to be correct. If that file is a static file then you need the static file path for the background image.

For example, if the path for background-image.jpg is:

path-to-static/images/background-image.jpg

Then instead of ..images/background-image.jpg you would need to use:

.background-img{
    background-image: url('/static/images/background-image.jpg');

}

That is, I believe, the default path to static files, though you can make configuration changes to that location.

David Scott
  • 796
  • 2
  • 5
  • 22
  • Thanks - I have tried this but still no luck, only the grey box! It is perhaps to do with the size of the background image and the size of the content block - should I be altering this? – watermelon123 Feb 20 '20 at 16:54
  • Have you checked the developer console on a browser like Chrome to see if the resource is being loaded correctly? It's fundamentally a CSS issue despite being delivered by flask, so the questions are ones of syntax and whether or not the browser is correctly able to load the resource. – David Scott Feb 20 '20 at 17:03
  • If the resource isn't being loaded, check to see if you can browse to it directly and what you see when you visit the image via URL. – David Scott Feb 20 '20 at 17:04
  • One method to verify your path is correct is to use {{ url_for('static', filename='images/background-image.jpg') }} somewhere in the text of your template and see what path Flask generates for you. You can then use that path. – David Scott Feb 20 '20 at 22:07