5

I am trying to set the background image using jinja2. I have managed to serve my file from my dev server and can post the image in the document, but I want it to form a nice background with everything else on top.

As an example, I tried this :

{% extends "layout.html" %}

{% block body %}
  {% if current_user.is_authenticated %}
    {% if commPageData.background_image %}    
        <body background="{{'/images/'+commPageData.background_image}}">
    {% else %}
        <body>
    {% endif %}
            A thing
         </body>

I have a css file and a layout file that gives the default behaviour for a template. How can I have a nice background image which I am serving?

1 Answer 1

5

You seem to be trying to tell the front end to use application routing without passing it the right commands. I'm assuming you're using Flask. Really, there are two ways (that I can think of) to slice this bread, and it just depends on you. The first is just using standard html and not embedding python to route the app to look for the file, and looks like:

<body background="/path/to/image.jpg">

But, if you want to take advantage of the framework and the template, then you should use the built in method url_for

It looks something like this:

<body background="{{ url_for('static', filename=commPageData.background_image) }}">

'static' being the directory in the application where this image lives.

Now, I'm not sure where commPageData.background_image is coming from in your app. My code snip assumes it is being served as a value it will recognize if passed back to the logic, if that makes sense, and it needs to be where you tell the url_for method looks for it, even when dynamically generated. If you actually have a specific image you want to render as the background, it needs to be specified appropriately:

<body background="{{ url_for('static', filename='image.jpg') }}">

Of course, has been deprecated in HTML5 and may not render appropriately in many browser. It is much preferred to use CSS instead with

<body style="background:url({{'images/'+commPageData.background_image}});"> 

or put it directly in your CSS file

3
  • Hi, I have no problem serving the image, and it seems yhou are giving tips on how to do that. Instead, I have just found that setting <body background="{{'/images/'+commPageData.background_image}}"> does not add a background. I can insert the image like this :<img src="{{''/images/'+commPageData.background_image'}}" style="width:304px;height:228px;">. I just can't make a background. This might have more to do with css and layout.html, I am not sure.
    – user442920
    Commented Jan 27, 2016 at 16:54
  • 1
    body background is deprecated, so it may depend upon your browser. It is much preferred to use CSS instead with <body style="background:url({{'images/'+commPageData.background_image}});"> or put it directly in your CSS file
    – tadamhicks
    Commented Jan 27, 2016 at 17:13
  • Hey, that was the problem. Thanks. I marked your original post as the answer, you may want to edit it to add your comment...dunno if that makes sense.
    – user442920
    Commented Jan 27, 2016 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.