Background-image url in php echo

Question

So I am using bootstrap css with my PHP website. For some reason I can get an img src to print just fine using the same location. But when i need to use background-image the images do not show. I cannot figure out why. Here is the section I am trying to get to show the standard bootstrap code.

//<!-- Wrapper for slides -->
      echo '<div class="carousel-inner">';
      echo '<div class="item active">';
      echo '<div class="fill" style="background-image:url("http://placehold.it/1900x1080&text=Slide One");"></div>';
      echo '<div class="carousel-caption">';
      echo '<h2>Caption 1</h2>';
      echo '</div>';
      echo '</div>';
      echo '<div class="item">';
      echo '<div class="fill" style="background-image:url("http://placehold.it/1900x1080&text=Slide Two");"></div>';
      echo '<div class="carousel-caption">';
      echo '<h2>Caption 2</h2>';
      echo '</div>';
      echo '</div>';
      echo '<div class="item">';
      echo '<div class="fill" style="background-image:url("http://placehold.it/1900x1080&text=Slide Three");"></div>';
      echo '<div class="carousel-caption">';
      echo '<h2>Caption 3</h2>';
      echo '</div>';
      echo '</div>';
      echo '</div>';

The fill css is this:

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

When I put it in a normal html file it works fine. However, I am using php and autoloading, hence the need to use echo statements to print out the html parts. I don't know why this is not displaying the images. Any ideas?

ShaneDeconinck · Accepted Answer · 2015-11-09 21:03:22Z

2

Your quotes are conflicting.

Try echo '<div class="fill" style="background-image:url(\'http://placehold.it/1900x1080&text=Slide One\');"></div>';

answered Nov 9, 2015 at 21:03

ShaneDeconinck

1348 bronze badges

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

Comments

I wrestled a bear once. · Accepted Answer · 2015-11-09 21:04:16Z

0

CSS looks ok, must be a CORS issue. Assuming you're using https on your site, your urls need to be https too. Or you could just remove the protocol and let the urls start with "//", then it automatically load on whichever protocol your page is loaded.

Also, use heredocs, that stack of echos is nasty.

echo <<<HTM
your
html
goes here
HTM;

answered Nov 9, 2015 at 21:04

I wrestled a bear once.

23.5k20 gold badges74 silver badges122 bronze badges

Collectives™ on Stack Overflow

Background-image url in php echo

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related