Add background images to map tables (arrows)

mentoring/table.py

@@ -33,10 +33,14 @@ class MentoringTableBlock(XBlock, XBlockWithChildrenFragmentsMixin):
                                                              view_name='mentoring_table_view')
         f, header_frags = self.get_children_fragment(context, view_name='mentoring_table_header_view')
 
+        # TODO: What's the right way to link to images from CSS? This hack won't work in prod
+        bg_image_url = self.runtime.resources_url('mentoring/img/{}-bg.png'.format(self.type))
+
         fragment.add_content(render_template('templates/html/mentoring-table.html', {
             'self': self,
             'columns_frags': columns_frags,
             'header_frags': header_frags,
+            'bg_image_url': bg_image_url,
         }))
         fragment.add_css(load_resource('static/css/mentoring-table.css'))
         fragment.add_javascript(load_resource('static/js/vendor/jquery.shorten.js'))

static/css/mentoring-table.css

+.mentoring-table {
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
 .mentoring-table table {
     width: 100%;
     border: 1px solid;
@@ -19,6 +25,10 @@
     width: 20%;
 }
 
+.mentoring-table td:first-of-type > div {
+    min-height: 500px;
+}
+
 .mentoring-table h3, .mentoring-table h4 {
     margin: 0 0 5px;
 }

templates/html/mentoring-table.html

-<div class="mentoring-table {{ self.type }}">
+<div class="mentoring-table {{ self.type }}" style="background-image: url({{ bg_image_url }})">
   <table>
     {% if header_frags %}
     <thead>