BackGround-image - Problème

20 avril 2017 à 18:02:01

Bonjour,

J'ai un background-image qui me sert de bannière sur mon site. J'ai un container avec ma navbar également sauf qu'il ne veut pas se mettre par dessus la bannière. Il se met en dessous la bannière quand je la mets.

Quelqu'un a-t-il la solution ? Voici le code :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Accueil | Furansu-Tomodachi</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <div class="banniere" style="background-image:url('img/Banniere.png');"></div>
    <div class="container">
        <div class="jumbotron col-lg-12">
            <div class="col-md-3">
                <img src="img/logo.png" alt="Logo" width="150" height="150">
            </div>

              <div class="navbar-header">
                <a class="navbar-brand" href="#">Accueil</a>
                <a class="navbar-brand" href="#">Correspondants</a>
                <a class="navbar-brand" href="#">Évènements</a>
              </div>
              <button type="button" class="btn btn-primary" id="btnInscription">S'inscrire</button>
              <button type="button" class="btn btn-success" id="btnConnexion">Connexion</button>
        </div>
    </div>


    <h1>Hello!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS :

.banniere {
display:block;
width:auto;
height:auto;
background-position:50% 50%;
background-repeat: no-repeat;
}

Merci !

-
Edité par llx_Azalpher 20 avril 2017 à 18:05:50

MrChampy

21 avril 2017 à 12:00:04

Hello,

Essaye de regarder du côté de la propriété z-index

llx_Azalpher

21 avril 2017 à 16:31:46

D'accord merci

Lord Morpheus

21 avril 2017 à 17:42:34

Bonjour,

Rien à voir avec le z-index ici. Tu ne donnes aucune hauteur à ta div.banniere tout simplement. http://www.bootply.com/mEOyHIGlNl

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

llx_Azalpher

21 avril 2017 à 19:33:13

Merci de ta réponse Lord Morpheus, cependant la bannière se trouve toujours au dessus de mon menu, je veux que le menu soit par dessus :/

Lord Morpheus

22 avril 2017 à 0:18:47

Passe la en position:absolute dans ce cas.

Mais quelle drôle d’idée... Pourquoi ne pas mettre directement le background sur ta nav? Je vois pas bien l'idée mais sa a surement un sens.

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

llx_Azalpher

22 avril 2017 à 1:08:02

C'est bon j'ai réussi ! J'ai tout mis dans un header auquel j'ai pu appliquer mon css, merci à vous deux !