Bootstrap .page-header image d'arrière-plan

Question

Je joue avec Bootstrap pour la première fois, mais je suis un peu coincé avec des choses de base comme l'étirement de l'image de fond. Mon code ressemble à ça:

CSS

.page-header { 
    background-image: url("images/header.jpeg") ; 
    -webkit-background-size: cover; /* For WebKit*/ 
    -moz-background-size: cover; /* Mozilla*/ 
    -o-background-size: cover;  /* Opera*/ 
    background-size: cover; 
    height: 300px; 
    width: 100%; 
    } 

Et mon code HTML

<header> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">ZELM</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a href=""><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 000 000 000</a></li> 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">O nás</a></li> 
     <li><a href="#">Katalog domů</a></li> 
     <li><a href="#">Reference</a></li> 

      <form class="navbar-form navbar-right"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Hledat"> 
     </div> 
     <button type="submit" class="btn btn-default">Hledej</button> 
     </form> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

<div class="page-header"> 
    <h1>Dům na klíč od společnosti ZELM <small>Postavíme vaše sny</small></h1> 
</div> 
    </header> 

Je cherchais une solution à Internet, mais na pas trouver une réponse. Le problème est que l'image d'arrière-plan ne s'affiche pas en taille réelle, mais qu'elle est étirée à mesure que la taille de l'écran change. Je veux lui donner une taille stricte, qui ne sera pas redimensionnée avec la taille de la fenêtre.

Je ne veux pas utiliser javascript, Id aime rester en CSS et HTML pour le moment.

Answer 1

Vous devez définir une taille de l'attribut background-size. Il pourrait être comme background-size: 1000px 600px; si vous voulez définir à la fois la hauteur stricte et la largeur, ou background-size: 1000px ; pour la largeur juste. Vous pouvez également ajouter background-repeat: no-repeat; pour vous assurer qu'il ne se répète pas.

CSS:

.page-header { 
    background-image: url("https://srilankafoundation.org/wp-content/uploads/2016/07/Beach.jpg") ; 
    -webkit-background-size: cover; /* For WebKit*/ 
    -moz-background-size: cover; /* Mozilla*/ 
    -o-background-size: cover;  /* Opera*/ 
    background-size: 1000px ; 
    background-repeat: no-repeat; 
    height: 300px; 
    width: 100%; 
    } 

HTML:

<header> 
    <nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">ZELM</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a href=""><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 000 000 000</a></li> 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">O nás</a></li> 
     <li><a href="#">Katalog domů</a></li> 
     <li><a href="#">Reference</a></li> 

      <form class="navbar-form navbar-right"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Hledat"> 
     </div> 
     <button type="submit" class="btn btn-default">Hledej</button> 
     </form> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

<div class="page-header"> 
    <h1>Dům na klíč od společnosti ZELM <small>Postavíme vaše sny</small></h1> 
</div> 
    </header> 

Voici un working fiddle de votre code. Pour plus d'informations, regardez here.

Answer 2

Si vous souhaitez une taille d'image fixe, spécifiez les valeurs exactes (hauteur de largeur) comme suit: background-size: 600px 600px. Ou vous pouvez le faire background-size: 600px; où la valeur de la hauteur par défaut est auto.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size