Using a background image in Django using static and variable

Question

I've seen a lot of these types of questions but none are using a {{ variable_name }} in the html using background. For context, I'm trying to insert a unique photo as a background image for every page.The name of the picture associated with every page that is to be inserted onto that page as the background image can be called with {{ item.name }}

<heading id="background-image" style="background-image: url({% static 'img/pattern.jpg' %});">

This will work for a specific background image, "pattern", but I want it to be dependent on a variable for that specific page.

The following code will import the correct image on the page, but it needs to be turned to a background image (so that I may put text in front)

<img src="{% static 'img/' %}{{ item.name }}.jpg" alt="item picture">

So, I'd have to do something like this, in theory, for the background image, but it doesn't work. What are some other ways to introduce a variable in a static manner for the URL field?

<heading id="background-image" style="background-image: url({% static 'img/'}{{ item.name }}'.jpg' %});">

If you know how to produce such an URL for img what is stopping you from doing the same for background-image. Your question contains the solution for "using 'static' and variable", so what are you asking? — IVNSTN
– IVNSTN, Commented Apr 8, 2020 at 7:01
@IvanStarostin Updated the question. I am asking how to introduce the variable, {{ item.name }}, in the URL field for the background-image, as well as using the static field to get the images from the static folder. — disneywithanl
– disneywithanl, Commented Apr 8, 2020 at 15:40
What you've done in background-image is not the same as in img.src - take another look. Yes, this syntax is broken. — IVNSTN
– IVNSTN, Commented Apr 8, 2020 at 16:30

disneywithanl · Accepted Answer · 2020-04-10 00:50:39Z

1

    <heading id="background-image" style="background-image: url(' {% static 'img/' %}{{ item.name }}.jpg');">

A couple of ticks were in the wrong place. What an annoying, tiny issue I spent days working on!

answered Apr 10, 2020 at 0:50

disneywithanl

114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IVNSTN · Accepted Answer · 2020-04-10 06:56:24Z

0

Try like this:

<heading id="background-image" style="background-image: url({% static 'img/' %}{{ item.name }}.jpg);">

static needed to be closed (%}) before {{. You were very close to the solution.

edited Apr 10, 2020 at 6:56

answered Apr 8, 2020 at 18:06

IVNSTN

9,3896 gold badges24 silver badges42 bronze badges

3 Comments

disneywithanl Over a year ago

Unfortunately, this isn't working. The path isn't being built correctly through the HTML file on the browser; it looks like this: <heading id="background-image" style="background-image: url(/static/img/'.jpg');"> as you can see, the {{ item.name }} field isn't being properly added. I'm beginning to think this simply isn't valid code.

IVNSTN Over a year ago

Quotes were unnecessary - fixed it. Item or item.name is not initialized and syntax has nothing to do with that.

IVNSTN Over a year ago

Show your real template and view code so we could help.

Collectives™ on Stack Overflow

Using a background image in Django using static and variable

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related