1

When I made a Bootstrap carousel in plain HTML it was working just fine, but when I pasted the code into Wordpress the carousel is completely white.


It's not a problem with the path because it will work if I change it from

<div class="fill" style="background-image:url("img/image01.png");"></div>

to 

<img src="img/image01.png" class="img-responsive" alt="">

then it works.


I know this seems like a HTML or CSS problem, but I feel like I've exhausted all options that I can think of, leading me to think it's something with Wordpress and Bootstrap not working together. I've tried changing background-image:url to just background:url but it still comes up with totally white.

I also know that if I try it on another div like:

<section id="schedule"> <div class="row" style="background-image: url('img/image01.png'); margin-top: 75px;"> <div class="callout-light text-center" style="margin-bottom: 30px;"> <h1>Header!</h1> </div> </div> </section>

That it comes up just fine.




Here is the full code:

<style> .fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } </style> <header id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for Slides --> <div class="carousel-inner"> <div class="item active"> <!-- Set the first background image using inline CSS below. --> <div class="fill" style="background-image:url('img/image01.png');"></div> <div class="carousel-caption"> <h2>Caption 1</h2> </div> </div> <div class="item"> <!-- Set the second background image using inline CSS below. --> <div class="fill" style="background-image:url('img/image02.png');"></div> <div class="carousel-caption"> <h2>Caption 2</h2> </div> </div> <div class="item"> <!-- Set the third background image using inline CSS below. --> <div class="fill" style="background-image:url('img/image03.png');"></div> <div class="carousel-caption"> <h2>Caption 3</h2> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </header>
Improve this question
13
  • You will need to set a width and height to the .fill or it's parent container with pixels instead of percentage. Commented Feb 6, 2016 at 17:15
  • But wouldn't that defeat the purpose of making it responsive, to use fixed pixel width/height? Commented Feb 6, 2016 at 17:18
  • Oh, right. So only the height. Commented Feb 6, 2016 at 17:20
  • Well that makes it show up sure, but then I could just display the image as a <img> and not as a <div> with a "background:url", and that's not what I'm trying to do. Commented Feb 6, 2016 at 17:25
  • I'm not following. What is the problem? Commented Feb 6, 2016 at 17:26

3 Answers 3

Reset to default
2

What if you use:

<div class="fill" style="background-image: url(<?php echo get_stylesheet_directory_uri();?>/img/image01.png);"></div>

You need to tell WordPress in "a WordPress-way" where to find the image... Look in codex at get_stylesheet_directory_uri().

Improve this answer
0 
<div class="fill" style="background-image:url("img/image01.png");"></div>

Your double quotes within double quotes will stop it from working, you need:

<div class="fill" style="background-image:url('img/image01.png');"></div>
Improve this answer
1
  • extremely unlikely Commented Jul 16, 2016 at 10:00
0

You should never use relative urls in wordpress except for css files. If "pretty permalink" something that works on one page might break on another. All urls should be absolute. The most you can get with usually is being relative to the protocol, but almost never anything more then that.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.