Why is my graph no longer functioning when I add a background image behind it?

Question

I am trying to add a background image behind my graph, although when I do it the graph goes infront of the background image but no longer works (i.e. no interactions, animations work etc.)

Could anybody please tell me why or maybe fix my code for me so that it works? The background image code is 'div id hero' and as soon as i add the closing tag underneath the graph code it doesn't work... here is my code:

<?php

//Database connection (localhost,username,password,databasename)

$con = mysqli_connect("localhost", "katie", "katie", "movies");
// Check connection
if (mysqli_connect_errno())
 {
echo "Failed to connect to MySQL: " . mysqli_connect_error();
 }
else
// Print connection successful if no error
{
echo "Connection still Successful </br>";
}


// Select all fields from the database
$sql = "SELECT * FROM TABLE_1";
//$sql = "SELECT * FROM 'TABLE 1' WHERE Movie Title =Star       Wars:TheForceAwakens";
$result = mysqli_query($con, $sql);

//echo var_dump($result);
// Check if database is not empty if not print data of each row

// create array
$emparray = array();
while($row = mysqli_fetch_assoc($result))
{
    $chart_gross .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Gross"]. "'},";


$chart_votes .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Votes"]. "'},";


$chart_data .= "{label:'" .$row["Movie Title"]. "', y:'" .$row["Votes"]. "'},";

}



//Close database connection
mysqli_close($con);
?>
<html>
<head>

<link href="https://fonts.googleapis.com/css?family=Montserrat"     rel="stylesheet">

  <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
 <title> 2015 Movie Title Gross and Votes</title>
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">   </script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <style>
      body {
  font: 20px Montserrat, sans-serif;
  line-height: 1.8;
  color: #000000;

   }
  p {font-size: 16px;}
  .margin {margin-bottom: 45px;}
 .bg-1 { 
  background-color: #1abc9c; /* Green */
  color: #ffffff;
 }

 .container-fluid {
  padding-top: 70px;
  padding-bottom: 70px;
  }

     #hero {
         background-image: url('images/background.png');
         background-size: cover;
         background-position: center center;
         position:relative;
         top: 0;
         bottom: 0;
         height: 100vh;
         z-index: -10;
     }




 </style>
 </head>
<body>



  <div id="hero">
         <div id ="hero-overlay"></div>
 </div>

 <div id="chartContainer" style="height: 75%; max-width: 80%; margin:0px auto;"></div>
     <script src="https://canvasjs.com/assets/script/canvasjs.min.js">   </script>

<script>    


    window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
interactivityEnabled: true,
 zoomEnabled:true,
      backgroundColor: "#ff7f7f",

title:{
    text: "Movie Title Votes and Gross, 2015"
},  
subtitles: [{
    text: "Click Legend to Hide or Unhide Data Series....View specific data and reveal all/more movie titles by click and dragging to zoom"
}],
  axisX:{
    title: "Movie Titles"

},
axisX:{
    labelFontSize: 8

  },



 axisY: {
    title: "Votes",
    titleFontColor: "#4F81BC",
    lineColor: "#4F81BC",
    labelFontColor: "#4F81BC",
    tickColor: "#4F81BC"
},
axisY2: {
    title: "Gross",
    titleFontColor: "#C0504E",
    lineColor: "#C0504E",
    labelFontColor: "#C0504E",
    tickColor: "#C0504E"
},  




        toolTip: {
    shared: true
},
legend: {
    cursor:"pointer",
    itemclick: toggleDataSeries
},

data: [{
    type: "column",
    name: "Gross",
    showInLegend: true, 
    legendText: "Gross",
    yValueFormatString: "#,##0.# Units",
    dataPoints:[<?php echo $chart_gross;?>]
},
{
    type: "column", 
    name: "Votes",
    legendText: "Votes",
    axisYType: "secondary",
    showInLegend: true,
    yValueFormatString: "#,##0.# Units",
    dataPoints:[<?php echo $chart_votes;?>]
}]
});
chart.render();


function toggleDataSeries(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
}
else {
    e.dataSeries.visible = true;
}
e.chart.render();
}
    }





</script>




<<div class="container-fluid bg-3 text-center">    
 <div class="row">
    <h3 class="margin">Total Earnt From Top 10 - 4,004.83BN US Dollars</h3><br>
        <p>This chart shows the gross earnt from US Box Office Sales of each individual Film of 2015</p>


<div class="col-sm-4">
  <img src="images/icon_action.png" class="img-responsive margin" style="width:100%" alt="Image">
</div>
<div class="col-sm-4"> 
  <img src="images/icon_scifi.png" class="img-responsive margin" style="width:100%" alt="Image">
</div>
<div class="col-sm-4"> 
  <img src="images/icon_action.png" class="img-responsive margin" style="width:100%" alt="Image">
</div>

</div>
</div>

 </body>
</html>

score 0 · Answer 1 · answered May 03 '18 at 16:58

As you've done with hero ID:

#hero{
    background-image: url('images/background.png');
    [...]
    top: 0;
    z-index: -10;
 }

You should do the same with chartContainer ID:

#chartContainer{
    z-index: 10;
}

z-index highest value will position above the other elements with lower value

Check this link for more information: All About.... Z-Index?

Why is my graph no longer functioning when I add a background image behind it?

1 Answers1