title: dynamic Backgrounds for django using image upload
body: <p>I've looked around and haven't found a satisfactory solution. I am trying to uploaded an image via the Django admin interface using models and then call that uploaded image to be used as the background for a div .i.e - I create football called Salford City, I upload a picture of the team. I will have several teams. If I choose Salford then the background changes, if I choose Brighton Albion then the background changes. I have it working using javascript and hard coded cities but I would like to be able to do it dynamically without have to change base coding to enable easy scaling. Current code is as follows:</p>
  
  <p>Models.py:</p>
  
  <pre><code>class City(models.Model):
  index = models.CharField(unique=True, max_length=250, null=False, blank = False, verbose_name = 'City Inner Search Name(lowercase)')
  landing_page_description = models.CharField(max_length=5000, null=True, blank = True, verbose_name = 'City Description')
  name = models.CharField(max_length=250, null=False, blank = False, verbose_name = 'City Common Name')
  country = models.ForeignKey(Country, null=True, blank=True)
  image = models.ImageField(upload_to="images/", blank=True, null=True, verbose_name= 'City Image')
  </code></pre>
  
  <p>The images are stored in media_files/images</p>
  
  <p>The html:</p>
  
  <pre><code>&lt;div id="main" class="container-fluid citybackground"&gt;
  &lt;!-- &lt;img src="{{ MEDIA_URL}}{{ City.image.url }}"&gt; --&gt;
  </code></pre>
  
  <p>AS you can see I tried multiple options. The commented out section was a method I tried.</p>
  
  <p>The css:</p>
  
  <pre><code>.citybackground
  {
  background-image: url( "{% images {{City.image.url}} %}");
  background-repeat:no-repeat;
  background-size:100%;
  }
  </code></pre>
  
  <p>The views.py:</p>
  
  <pre><code>def SetCitySession(request):
    if request.method == "POST":
  
      request.session['city-name'] = request.POST['cityName']
      request.session['city-id'] = request.POST['cityId']
  
      return JsonResponse({})
  
  
  def GetCitySession(request):
    if request.method == "GET":
  
      cityName = request.session['city-name']
      cityId = request.session['city-id']
  
      context = {
          "cityName": cityName,
          "cityId": cityId
      }
  
      return JsonResponse(context)
  </code></pre>
  
  <p>This is currently working hard coded javascript which I want to stop using since it isn't dynamic.</p>
  
  <pre><code>function changeBackground(city){
      var urlBackground;
  
      switch(city){
          case "Manchester":
              urlBackground = "/static/img/fondo_main.jpg";
              break;
          case "Liverpool":
              urlBackground = "/static/img/liverpool_background.jpg";
              break;
          case "London":
              urlBackground = "/static/img/london_background.jpg";
              break;
      }
  
      $("#main").css("background-image", "url('{% if city.image %}{{ city.image.url }}{% else %}{"+ urlBackground + "}{% endif %}')";
  }
  </code></pre>
  
  <p>Thanks ya'll</p>