Locally stored background image for django jumbotron

Question

The background image is correctly displayed when I enter the URL of an external image (Google in the example):

<div class="jumbotron" style="background-image: 
url(https://www.google.co.uk/logos/doodles/2014/cricket-t20-world-cup-2014-final-5735702968926208-hp.jpg);
background-size: cover;">

But not when I use an image stored locally (static/media/leaving.png), neither

<div class="jumbotron" style="background-image:
{{MEDIA_ROOT}}leaving.png;
background-size: cover;">

nor

<div class="jumbotron" style="background-image: 
url({{MEDIA_ROOT}}leaving.png);
background-size: cover;">

The Settings.py contains MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static", "media").

How can I display the locally stored image in the background?

Answer 1

You shouldn't be using MEDIA_ROOT, which contains a local file path, but MEDIA_URL, which contains a URL to your local media files.

(Actually, are you sure you mean MEDIA rather than STATIC? The former is for assets uploaded by users, whereas the latter is for permanent assets provided by the application.)