Je voulais mettre une image de fond dans le div "pageIntro". J'ai essayé de définir la couleur d'arrière-plan sur transparent, j'ai vérifié le chemin du fichier image à plusieurs reprises (c'est certainement correct, car lorsque je clique dessus dans mon code en utilisant vsCode, l'image correcte apparaît).

Remarque: mettre une couleur d'arrière-plan fonctionne bien

capture d'écran du div sans couleur d'arrière-plan. L'image d'arrière-plan est définie sur '/img/home/flower-cup.jpg'.

capture d'écran du div avec la couleur de fond GOLD. L'image d'arrière-plan est toujours définie sur '/img/home/flower-cup.jpg'.

Voici le CSS du div et tous les éléments qu'il contient:

div.pageIntro {
    position: relative;
    background-image: url('/img/home/flower-cup.jpg') ;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    z-index: 001;
    text-align: center;
}

.introDiv {
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    z-index: 002;

}

.introText {
    font-weight: bold;
    font-family: "eczar";
    color: whitesmoke;
    font-size: 50px;
    z-index: 002;
}

.subIntroButton {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:rgba(0, 0, 0, 0.1);
    width: 150px;
    border-style: solid;
    border-radius: 5%;
    border-color: whitesmoke;
    border-width: 2px;

    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: whitesmoke;
    padding: 10px 10px;
}

Voici le HTML:

<div class='pageIntro'>
    <div class="introDiv">
            <p class='introText'> You deserve it. </p>
            <a href="menu.html" style="text-decoration : none">
                <div class='subIntroButton'> check treats </div>
            </a>
    </div>
    <span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"></span></div></a>
</div>

Merci beaucoup :)

METTRE À JOUR: Voici à quoi cela ressemble lorsque vous placez l'image d'arrière-plan sur LES DEUX div internes et externes. Malheureusement, cela ne fonctionne qu'à l'intérieur.

1
Joshua D. 27 avril 2020 à 04:05

2 réponses

Meilleure réponse

Salut comme je peux voir votre chemin relatif.

Si le dossier image est dans le même chemin que votre html

Ce que je peux voir une erreur dans votre HTML. Ce qui est span n'est pas correctement fermé avec les balises a et img.

<div class='pageIntro'>
    <div class="introDiv">
            <p class='introText'> You deserve it. </p>
            <a href="menu.html" style="text-decoration : none">
                <div class='subIntroButton'> check treats </div>
            </a>
    </div>
    <span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"/></a></span>
</div>

Vous pouvez utiliser .

div.pageIntro {
    position: relative;
    background-image: url('./img/home/flower-cup.jpg') ;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    z-index: 001;
    text-align: center;
}

Ou si c'est one above votre chemin, vous pouvez utiliser ..

div.pageIntro {
    position: relative;
    background-image: url('../img/home/flower-cup.jpg') ;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    z-index: 001;
    text-align: center;
}

J'ai créé un violon JS

1
Tammy 27 avril 2020 à 02:32

Le problème est avec votre Chemin relatif de l'image . Je viens d'essayer de coder avec un chemin d'image en ligne, cela fonctionne bien.

div.pageIntro {
    position: relative;
    background-image: url('https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500') ;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    width: 100vw;
    height: 100vh;
    z-index: 001;
    text-align: center;
}

.introDiv {
    background-color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    z-index: 002;

}

.introText {
    font-weight: bold;
    font-family: "eczar";
    color: whitesmoke;
    font-size: 50px;
    z-index: 002;
}

.subIntroButton {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color:rgba(0, 0, 0, 0.1);
    width: 150px;
    border-style: solid;
    border-radius: 5%;
    border-color: whitesmoke;
    border-width: 2px;

    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    color: whitesmoke;
    padding: 10px 10px;
}
<div class='pageIntro'>
    <div class="introDiv">
            <p class='introText'> You deserve it. </p>
            <a href="menu.html" style="text-decoration : none">
                <div class='subIntroButton'> check treats </div>
            </a>
    </div>
    <span class="blinking" href="javascript:"><a href="javascript:"><img src="img/arrow-down.png" style="position: relative; bottom: 12%; width: 40px"></span></div></a>
</div>
2
Matee Gojra 27 avril 2020 à 01:15