Bootstrap .page-header background image

Question

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.

Answer 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.