dynamisch ändern CSS-background-image

Ich bin ziemlich neu in PHP und Javascript, also bitte verzeihen Sie meine Unwissenheit und schlechte Nutzung der Terminologie, aber ich werde mein bestes tun, genau zu erklären, was ich bin kämpfen, um Sie zu erreichen.

Ich die gespeicherten Daten in ein PHP-array, das nenne ich auf meiner index-Seite mit der Funktion unten (der code unten ist in einer separaten PHP-Datei aufgerufen articles.php in meinem index.php) :

<?php

function get_news_feed($article_id, $article) {

  $output = "";

  $output .= '<article class="img-wrapper">';
  $output .= '<a href="article.php?id=' . $article_id . '">';
  $output .= '<div class="news-heading">';
  $output .= "<h1>";
  $output .= $article["title"];
  $output .= "</h1>";
  $output .= "<p>";
  $output .= "Read more...";
  $output .= "</p>";
  $output .= "</div>";
  $output .= '<div id="news-img-1">';
  $output .= "</div>";
  $output .= "</a>";
  $output .= "</article>";

  return $output;
} 

$articles = array();
$articles[] = array(
  "title" => "Andy at NABA",
  "description" => "Docendi, est quot probo erroribus id.",
  "img" => "img/gym-01.jpg",
  "date" => "05/04/2013" 
);
$articles[] = array(
  "title" => "Grand Opening",
  "description" => "Docendi, est quot probo erroribus id.",
  "img" => "img/gym-01.jpg",
  "date" => "05/04/2013" 
);

?>

Meine index.php sieht aus wie das folgende minus einige HTML, das spielt keine Rolle in diesem Prozess:

<?php 
include("inc/articles.php");
?>

<?php
$pageTitle = "Home";
include("inc/header.php"); 
?>

<section class="col-4 news">

    <?php

    $total_articles = count($articles);
    $position = 0;
    $news_feed = "";

    foreach($articles as $article_id => $article) {

    $position = $position + 1;
        if ($total_articles - $position < 2) {
            $news_feed .= get_news_feed($article_id, $article);
        }
    } 

    echo $news_feed;

    ?>

</section>

Ich Strebe dynamisch ändern CSS-Background-Image-Eigenschaft des div-Elements mit ID news-img-1 mit Javascript.

Habe ich versucht solche Dinge wie:

document.getElementById('news-img-1').style.backgroundImage = 'url('<?php $article["img"]; ?>')';

document.getElementById('news-img-1').style.backgroundImage = 'url('http://www.universalphysique.co.uk/' + '<?php $article["img"]; ?>')';

document.getElementById('news-img-1').style.backgroundImage = 'url('window.location.protocol + "//" + window.location.host + "/" + '<?php $article["img"]; ?>')';

.....aber ich bin nirgends bekommen!! Mein code in der Praxis funktioniert, da der folgende Javascript fügt ein Bild richtig:

document.getElementById('news-img-1').style.backgroundImage = 'url("img/gym-01.jpg")';

Hier ist meine Website und läuft, die Bilder sollen in den leeren Kreisen, du wirst sehen! Jede Hilfe würde groß sein, das diejenigen, die hart für mich!!