web-dev-qa-db-fra.com

Pourquoi "background-image: url" ne fonctionne-t-il pas avec Bootstrap carrousel sur WP?

Lorsque j'ai créé un carrousel Bootstrap en langage HTML simple, cela fonctionnait parfaitement, mais lorsque j'ai collé le code dans Wordpress, le carrousel est complètement blanc.


Ce n’est pas un problème avec le chemin parce que cela fonctionnera si je le change de

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

à

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

alors ça marche.


Je sais que cela ressemble à un problème HTML ou CSS, mais j’ai le sentiment que j’ai épuisé toutes les options auxquelles je peux penser, ce qui m’amène à penser que c’est un problème avec Wordpress et Bootstrap qui ne fonctionnent pas ensemble. J'ai essayé de changer background-image: url en juste background: url mais il est toujours totalement blanc.

Je sais aussi que si j'essaye sur une autre div comme:

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

Que ça se passe bien.




Voici le code complet:

<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

Et si vous utilisez:

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

Vous devez indiquer à WordPress "comment utiliser WordPress" où trouver l'image ... Regardez dans le codex sous get_stylesheet_directory_uri () .

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

Vos guillemets entre guillemets l'empêcheront de fonctionner, vous avez besoin de:

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

Vous ne devez jamais utiliser d'URL relatifs dans wordpress, sauf pour les fichiers css. Si "joli permalien" quelque chose qui fonctionne sur une page peut casser sur une autre. Toutes les URL doivent être absolues. Le mieux que vous puissiez obtenir est généralement d’être relatif au protocole, mais presque jamais plus que cela.

0
Mark Kaplun