Background image in style attribute not loading

Question

There seems to be some problems with the following code I downloaded from a free website template. Instead of showing my pictures, there is only white text on white background. I can only see the text if I mark it with the mouse. Is there something wrong with the code?

<!-- Start Banner -->
<div class="ulockd-home-slider">
    <div class="container-fluid">
        <div class="row">
            <div class="pogoSlider" id="js-main-slider">
                <div class="pogoSlider-slide" style="background-image:url(images/sladd_ur.jpg);">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="slide_text white_fonts">
                                    <h3>Progress & Success<br><strong>Currency</strong></h3>
                                    <br>
                                    <a class="start_exchange_bt" href="exchange.html">Start Exchange ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pogoSlider-slide" style="background-image:url(images/sladd_i.jpg);">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="slide_text white_fonts">
                                    <h3>Progress & Success<br><strong>Currency</strong></h3>
                                    <br>
                                    <a class="start_exchange_bt" href="exchange.html">Start Exchange ></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- .pogoSlider -->
        </div>
    </div>
</div>
<!-- End Banner -->

Answer 1

I do not know whether you have configured settings.py and urls.py to serve static content. First i would advise you to go through the documentation about serving static content

To serve static content add this in settings.py:

# Static files (CSS, JavaScript, Images)

STATIC_URL = '/static/'

If application is in debug mode then add this urls.py

from django.conf import settings
from django.conf.urls.static import static

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Makesure you have static tag loaded in template i.e

{% load static %}

Then you need to add images in static folder.Either add in static folder of your project or add in static folder of your app.

If images are in static folder of project i.e myproject/static/images, then replace the style attribute with this:

style='background-image:url({% static "images/sladd_ur.jpg" %}');

If images are in static folder of app i.e myproject/myapp/static/myapp/images, then replace the style attribute with this:

style='background-image:url({% static "myapp/images/sladd_ur.jpg" %}');