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

Answer 1

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