Add background image to DataTable

Question

I am rendering a table using Datatables. I am also using bootstrap in my html page. I want to display a background image(responsive) in the body of the table and cannot exactly figure out how. I tried the following:

<div class="table-responsive" style="20px; background-image:'/static/img/rsz_background.jpg';">

<table id="{{tab.table_id}}" class="table table-hover table-bordered compact left" data-pagination="true" data-search="true" style="width:98% !important; background-image:'/static/img/rsz_background.jpg'">

<tbody style ="background-image:'/static/img/rsz_background.jpg' ">     

None of the above seem to work. I noticed that when I try to change the background color, no changes are reflected in the body. I don't now if this a bootstrap issue. I am new to Web Dev, please suggest me what to do. Imports:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href= "{{ url_for('static',filename='css/query.css') }}" rel="stylesheet" type="text/css">  
<link href= "{{ url_for('static',filename='css/table.css') }}" rel="stylesheet" type="text/css">  

<!-- For DataTable plugin -->
<link href= "//cdn.datatables.net/1.10.7/css/jquery.dataTables.css"   rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js" type="text/javascript"></script>

What would be the correct order of imports?

Answer 1

SOLUTION

Use CSS rule below instead of inlining CSS styles with style attribute, this is considered to be bad practice.

.table-bg-dark {
    color: #FFF;
    background-image: url(http://lorempixel.com/1200/800); 
    background-size: cover;
}

Then you could use the following HTML:

<div class="table-responsive table-bg-dark">
   <table id="{{tab.table_id}}" class="table table-hover table-bordered table-condensed" cellspacing="0" width="100%">

      <!-- skipped -->

   </table>
</div>

DEMO

See this jsFiddle for code and demonstration.

NOTES

Include the following files:

<!-- Twitter Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<link href= "{{ url_for('static',filename='css/query.css') }}" rel="stylesheet" type="text/css">  
<link href= "{{ url_for('static',filename='css/table.css') }}" rel="stylesheet" type="text/css">  

<!-- jQuery DataTables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs/dt-1.10.9/datatables.min.css"/> 
<script type="text/javascript" src="https://cdn.datatables.net/r/bs/dt-1.10.9/datatables.min.js"></script>