Full-width background image in Bootstrap 3

Question

I am able to create a full-width image background in Bootstrap 3. An example can be shown here:

body,
html {
  height: 100%;
}
body {
  padding-top: 50px;
}
.full {
  padding: 0 !important;
  margin: 0 auto !important;
  background-size: cover;
  overflow: hidden;
}
.wide {
  width: 100%;
  height: auto;
}

.logo {
  color: #fff;
  font-weight: 800;
  font-size: 14pt;
  padding: 25px;
  text-align: center;
}
.line {
  padding-top: 20px;
  white-space: no-wrap;
  overflow: hidden;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Username</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

<div class="full" style="background-image:url('https://c.stocksy.com/a/RcN300/z0/805779.jpg');">
  <div class="container">
    <div class="row clearfix">
      <div style="padding: 0 0 200px 0;">
        <div class="col-xs-5 line">
          <hr>
        </div>
        <div class="col-xs-2 logo text-center">Logo</div>
        <div class="col-xs-5 line">
          <hr>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="text-center">
    <h1>Content</h1>
  </div>
</div>
<!-- /.container -->

When the page displays for Desktop, the image is shown wide covering entire area. When the page displays for mobile, all the image now shows as if a zoom-out occurred.

What's this behavior? How can I make the image in mobile view look similar to the image displayed in desktop version?

Is this related to responsive imaging?

Thanks /Bilal

Cut the image in a image editor and use it.. that way it cant display the whole image on a mobile — Jones Joseph, Jan 02 '17 at 11:03
@JonesVinothJosephSo I configure with a media query what background image to use when on mobile (the cut one)? 10x — Bill, Jan 02 '17 at 11:23

Asons · Accepted Answer · 2017-01-02T14:18:49.310

This is caused by the standard behavior of cover. If you resize your desktop browser to a portrait like size, you'll see what I mean.

One option would be to use a media query, so when page is viewed in portrait mode, it will look somewhat better.

body,
html {
  height: 100%;
}
body {
  padding-top: 50px;
}
.full {
  padding: 0 !important;
  margin: 0 auto !important;
  background-size: cover;
  overflow: hidden;
}
.wide {
  width: 100%;
  height: auto;
}

.logo {
  color: #fff;
  font-weight: 800;
  font-size: 14pt;
  padding: 25px;
  text-align: center;
}
.line {
  padding-top: 20px;
  white-space: no-wrap;
  overflow: hidden;
  text-align: center;
}
@media (orientation: portrait) {
  .full {
    background-size: 200% auto;
    background-position: top right;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#about">About</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Username</a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</div>

<div class="full" style="background-image:url('https://c.stocksy.com/a/RcN300/z0/805779.jpg');">
  <div class="container">
    <div class="row clearfix">
      <div style="padding: 0 0 400px 0;">
        <div class="col-xs-5 line">
          <hr>
        </div>
        <div class="col-xs-2 logo text-center">Logo</div>
        <div class="col-xs-5 line">
          <hr>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="text-center">
    <h1>Content</h1>
  </div>
</div>
<!-- /.container -->

Thanks @LGSon. My problem is when viewing the website on a desktop browser, on small parts of the image show, When going mobile, all the image is shown. Is that a normal behavior? Can't I see the whole image when in desktop browsing? — Bill, Jan 02 '17 at 14:00
@Bill But that is caused by the fact that the `full` div is only about 200px height (the padding you gave it + its content). I updated my answer and increased the padding and you see what's happening. The background image will not by itself size its element to fill the screen, it needs a height. — Asons, Jan 02 '17 at 14:21

Full-width background image in Bootstrap 3

1 Answers1