Partage

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

21 avril 2017 à 12:00:04

Hello,

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

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
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 :/
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
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 ! :)

BackGround-image - Problème

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown