dynamically changing CSS background-image

Question

I'm fairly new to both PHP and Javascript, so please forgive my ignorance and poor use of terminology, but I'll do my best to explain exactly what I'm struggling to achieve.

I have information stored in a PHP array that I call to my index page using the function below (the code below is in a separate PHP file called articles.php that's included in my 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" 
);

?>

My index.php looks like the following minus some HTML that plays no role in this process:

<?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>

I am aiming to dynamically change the CSS Background-Image property of the div element with ID news-img-1 using Javascript.

I have tried such things as:

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"]; ?>')';

.....but I'm getting nowhere!! My code in practise works because the following Javascript inserts an image correctly:

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

Here is my site up and running, the images should be placed in the empty circles you'll see! Any help would be great, this ones tough for me!!

Dom Day · Accepted Answer · 2013-07-08 17:37:18Z

1

comparing the hard coded javascript to ones that don't work, I notice that you are not including the double-quotes around the <?php $article["img"]; ?> snippet. The hard coded one shows

= 'url("img/gym-01.jpg")'

but the ones with the php snippet will produce

 = 'url(img/gym-01.jpg)'

so perhaps if you modify it to

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

OR

edit the get_news_feed function as follows:

replace these lines

$output .= '<div id="news-img-1">';
$output .= "</div>";

with

$output .= '<div class="news-img"><img src="' . $article["img"] . '"></div>' ;

and change your css like so:

article.img-wrapper {
    position: relative;
}

div.news-img {
    position: absolute;
    top: 0;
    z-index: -1000;
}

OR

Modify your get_news_feed function, change the statement for the <div id="news-img-1"> output to include a data-url attribute like:

$output .= '<div class="news-img" data-url="' . $article["img"] . '">';

Then add a jquery statement like:

$(".news-img").each( function() { 
        $(this).css("background-image", "url(" + $(this).data("url") +")" ); 
    });

The jquery statement goes in a static js file as opposed to generating the script in php.

edited Jul 8, 2013 at 17:37

answered Jul 7, 2013 at 20:13

Dom Day

2,56215 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Sam Holguin Over a year ago

Cheer for the help Dom, but still no success... I also tried document.getElementById('news-img-1').style.backgroundImage = 'url("' + <?php $article["img"]; ?> + '")'; to incorporate Mohammad's input

Sam Holguin Over a year ago

I've done a fair bit of research to try work this out myself, but I've come up short, I really thought it would be an easy one...

Dom Day Over a year ago

looking at the script on your site, the first commented out line looks almost right, except for the extraneous single quotes scattered about. in the part that says 'url('universalphysique.co.uk/img/gym-01.jpg' + '')'; , the second single quote should be a double quote, and the ' + ''); at the end needs to be "); ... I think your problem is just structuring your php to output the right syntax

Dom Day Over a year ago

perhaps doing <?php $url = $article["img"]; echo '\'url(\"$url\")\'' ; ?> would do it.

Dom Day Over a year ago

I think I'd modify your get_news_feed function and change the output for the <div id="news-img-1"> output to include a data-url attribute ... like ... $output .= '<div class="news-img" data-url="' + $article["img"] + '">'; and then add a jquery statement like $(".news-img").each( function() { $(this).css("background-image", "url(" + $(this).data("url") +")" ); } ); ... the jquery statement goes in a static js file as opposed to generating the script in php

|

Mohammad Areeb Siddiqui · Accepted Answer · 2013-07-07 19:47:56Z

0

You need to remove the quotes from your PHP tags and see if it works!

Do it like this:

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

Hope it helps.

answered Jul 7, 2013 at 19:47

Mohammad Areeb Siddiqui

10.2k16 gold badges74 silver badges118 bronze badges

2 Comments

Sam Holguin Over a year ago

Thank you for your input Mohammad,. I'm getting no JS console error, but the images are still not displayed with your idea. to me Logic would suggest it should work :) but I'm guessing there's an issue with PHP being server side?

Sam Holguin Over a year ago

I have also tried to include the public file path in my PHP array - "img" => "universalphysique.co.uk/img/gym-01.jpg" but still no joy

Collectives™ on Stack Overflow

dynamically changing CSS background-image

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related