problème établissement de banner par DamienBarral1 - page 1

Bonjour,

Je cherche à créer une banner qui occuperai toute la largeur de la page mais pas sa hauteur et qui ne soit donc pas une photo de fond d'écran.

Cependant malgré mes tentatives je ne parviens pas à réduire l'image pour la centrer sur la partie qui m’intéresserai. Elle continue d'occuper toute la page et ne semble pas s'arrêter à ma divison.

ci-joint des photos pour imager mon propos ainsi que le code html et CSS utilisé.

  <body>
    <div class="block">
      <header class="header">
      <a href="#" class="header-logo">CVM</a>
      <nav class="header-menu">
        <a href="#">Acceuil</a>
        <a href="#">Musique</a>
        <a href="#">Voyage</a>
        <a href="#">Mode</a>
        <a href="#">Contact</a>
      </nav>
        </header>
    </div>

<div class="block">
      <div class="banner">
        <img class="banner-image" src="src/img/culture.jpg" alt="groupe d'amis à Berlin">
        <div class="banner-content">

  <h1 class="title is 1">Culture pour les vrais morrays</h1>
  <h2 class="subtitle">La street culture dans tous ses états</h2>
<button class="button is-link">Contactez nous!</button>
          </div>
      </div>
    </div>

CSS

.header{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  height: 70px;
  background-color: rgba(0,0,0,0);
line-height: 70px;
position: fixed;
top: 0;
z-index: 999;
}

.header .header-logo{
  color: black;
  font-family: 'Montserrat', sans-serif;
  float: left;
  margin-left: 30px;

}

.header .header-menu{
  float: right;
  margin-right: 30px;
font-size: large;

}

.header .header-menu a {
  margin-right: 15px;
  color: black;

}

.header .header-menu a{
  position: relative;
  color: #000;
  text-decoration: none;}

.header .header-menu a:hover{
  color: black;
}

.header .header-menu a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.header .header-menu a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);

}

.banner{
  margin-top: -25px;
  text-align: center;
  width: 100%;
  display:block;

  }

.banner > .banner-image{
width: 100%;
display:block;

}



.banner > .banner-content{
  position: absolute;
  width: 100%;
  top: 30%;
display: block;

}

Je vous remercie par avance pour votre aide et j'espère ne pas avoir fait de doublon sur le forum! Je peux évidemment vous fournir des screenshots de mon site à l'heure actuelle si cela peut aider!

problème établissement de banner

problème établissement de banner

Supprimer

Modérer

Signaler le message aux modérateurs