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>
  • You will need to set a width and height to the .fill or it's parent container with pixels instead of percentage. – Nathan Powell Feb 6 '16 at 17:15
  • But wouldn't that defeat the purpose of making it responsive, to use fixed pixel width/height? – user122552 Feb 6 '16 at 17:18
  • Oh, right. So only the height. – Nathan Powell Feb 6 '16 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. – user122552 Feb 6 '16 at 17:25
  • I'm not following. What is the problem? – Nathan Powell Feb 6 '16 at 17:26
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().

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>
  • extremely unlikely – Mark Kaplun Jul 16 '16 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.