web-dev-qa-db-ja.com

WPのBootstrapカルーセルで「background-image：url」が機能しないのはなぜですか？

私が普通のHTMLでBootstrapカルーセルを作ったとき、それはうまく働いていました、しかし、私がコードをWordpressに貼り付けたとき、カルーセルは完全に白いです。


パスを変更しても機能するので、問題はありません。

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

に

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

それはうまくいきます。


これはHTMLまたはCSSの問題のように見えることはわかっていますが、考えられるすべてのオプションを使い果たしたため、WordpressとBootstrapが連携していないと考えるようになりました。 background-image：url をちょうど background：url に変更してみましたが、それでもやはり完全に白い文字が表示されます。

私はまた私がのような別のdivでそれを試してみるなら：

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

それはうまく上がること。




これは完全なコードです。

<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>
pluginsimagescsstwitter-bootstrap
1
user122552

あなたが使用する場合はどうなりますか？

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

画像を見つける場所をWordPressに指示する必要があります... codexの get_stylesheet_directory_uri（） を参照してください。

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

二重引用符で囲まれた二重引用符は機能しなくなります。次のものが必要です。

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

あなたはCSSファイルを除いてwordpressで相対的なURLを使用するべきではありません。 「かなりパーマリンク」すると、あるページで機能するものが別のページで機能しなくなる可能性があります。すべてのURLは絶対にする必要があります。あなたがたいてい得ることができる最も多くはプロトコルに関連しています、しかしそれ以上のことはほとんど何もしません。

0
Mark Kaplun