Bootstrap .page-header background image

问题

I am playing with Bootstrap for first time, but I am a little stucked with a basic stuff like stretching of background image. My code looks like that:

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

And my 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>

I was looking for solution at internet, but didnt find any answer. The problem is, that the background image is not displaying in full size, but it is stretching as the size of the screen is changing. I want to give it a strict size, which will not resize with size of window.

I dont wanna use javascript, Id like to stay in CSS and HTML for now.

回答1:

You should set a size for the background-size attribute. It could be like background-size: 1000px 600px; if you want to set both strict height and width, or background-size: 1000px ; for just width. You could also add background-repeat: no-repeat; to ensure it doesnt 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>

Here is a working fiddle of your code. For more info, look here.

回答2:

If you want a fixed image size specify the exact values (width height) like so: background-size: 600px 600px. Or you can do this background-size: 600px; where the height value defaults to auto.

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

来源：https://stackoverflow.com/questions/45355016/bootstrap-page-header-background-image