wake-up-neo.com

Warum funktioniert "background-image: url" nicht mit Bootstrap-Karussell in WP?

Als ich ein Bootstrap-Karussell in einfachem HTML erstellt habe, hat es einwandfrei funktioniert, aber als ich den Code in Wordpress eingefügt habe, ist das Karussell vollständig weiß.


Es ist kein Problem mit dem Pfad, da es funktionieren wird, wenn ich ihn von ändere

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

zu

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

dann klappt es.


Ich weiß, dass dies ein HTML- oder CSS-Problem zu sein scheint, aber ich habe das Gefühl, dass ich alle Optionen ausgeschöpft habe, die mir in den Sinn kommen, dass Wordpress und Bootstrap nicht zusammenarbeiten. Ich habe versucht, background-image: url zu ändern, um nur background: url , aber es kommt immer noch mit völlig weiß.

Ich weiß auch, dass, wenn ich es auf einem anderen Div probiere,

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

Dass es gut geht.




Hier ist der vollständige 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>
1
user122552

Was ist, wenn Sie verwenden:

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

Sie müssen WordPress in "einem WordPress-Weg" mitteilen, wo das Bild zu finden ist ... Schauen Sie sich im Codex get_stylesheet_directory_uri () an.

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

Ihre doppelten Anführungszeichen in doppelten Anführungszeichen verhindern, dass es funktioniert. Sie benötigen:

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

Sie sollten in WordPress niemals relative URLs verwenden, außer für CSS-Dateien. Wenn "pretty permalink", kann etwas, das auf einer Seite funktioniert, auf einer anderen Seite kaputt gehen. Alle URLs sollten absolut sein. Das Beste, womit Sie normalerweise zu tun haben, ist, relativ zum Protokoll zu sein, aber fast nie mehr.

0
Mark Kaplun