Bootstrap。頁面背景圖片

Question

我正在玩Bootstrap的第一次，但我有點像一個基本的東西像伸展背景圖像stucked。我的代碼看起來像這樣：

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%; 
    } 

而我的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> 

我一直在尋找在互聯網的解決方案，但沒有找到任何答案。問題是，背景圖像不能以全尺寸顯示，但隨着屏幕尺寸的變化而變長。我想給它一個嚴格的大小，它不會隨着窗口的大小而調整大小。

我不想使用JavaScript，Id喜歡留在現在的CSS和HTML。

Answer 1

您應該設置大小爲background-size屬性。如果你想設置嚴格的高度和寬度，或者background-size: 1000px ;爲寬度，它可能類似於background-size: 1000px 600px;。 您也可以添加background-repeat: no-repeat;以確保它不會重複。

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> 

這裏是你的代碼的working fiddle。 欲瞭解更多信息，請看here。

Answer 2

如果你想要一個固定的圖像大小指定精確的值（寬度高度），如下所示：background-size: 600px 600px。或者你可以這樣做background-size: 600px;其中高度值默認爲auto。

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