Nate Mathews Nate Mathews -4 years ago 186
CSS Question

Correct Image Size for Jumbotron

I am using a jumbotron container in bootstrap and trying to use an image as the background. However, it seems like all images distort as the screen size changes or don't display the correct part of the photo. Is there a correct size I should set save my image in? Or a way to get rid of/minimize distortion on screen resize? I can show you my code if necessary.

Thanks in advance!

CSS:

*{
margin: 0;
padding: 0;
}

.navbar-default{
background-color: rgb(66, 134, 244);
}
.under {
border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
width: 300px;
}
.jumbotron{
height: 400px;
background: url("../images/parakeet.jpg");
background-size: cover;
}

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/custom.css" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">

<!-- Button nav for small screens -->

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand name -->

<a class="navbar-brand" href="#">WebSiteName</a>
</div>

<!-- Makes nav not expand on resize -->

<div class="collapse navbar-collapse" id="myNavbar">

<!-- Menu -->
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>

<!-- Dropdown menu -->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<!-- Non dropdown -->
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center under">
<h1>Website Heading</h1>
<p>Information about the website!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-leaf size"></span>

</div>
<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-hourglass btn-lg"></span>

</div>

<div class="col-sm-4 text-center">
<h2>Text</h2>
<p>More text describing the heading!</p>
<span class="glyphicon glyphicon-plus btn-lg"></span>
</div>

</div>

</div>
</body>
</html>

Answer Source

That is perfectly fine. Now you need to play with background-position Now if you run this code. You will see an image with some cute dogs. Now on smaller devices you will see the 3 middle dogs. Why? because the background-position is set to 50% on x and 50% on y (The center of the image)

Let's say that on mobiles you want to show the right most puppy with the black head. That is simple you just set background-position to 100% and 50%.

*{
    margin: 0;
    padding: 0;
}

.navbar-default{
    background-color: rgb(66, 134, 244);
}
.under {
    border-bottom: 15px solid rgb(66, 134, 244);
}
.size {
    width: 300px;
}
.jumbotron{
    height: 400px;
    background: url("https://puppydogweb.com/wp-content/uploads/2015/05/54_2383_Cute-Puppies-puppies-16094619-1280-800.jpg");
    background-size: cover;
    background-position: 0 50%;
}
<body>

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">

<!-- Button nav for small screens -->

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
<!-- Brand name -->

      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

<!-- Makes nav not expand on resize -->

    <div class="collapse navbar-collapse" id="myNavbar">

<!-- Menu -->
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>

<!-- Dropdown menu -->
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
<!-- Non dropdown -->
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
    </div>
</nav>
      <div class="jumbotron text-center under">
    <h1>Website Heading</h1>
      <p>Information about the website!</p>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-4 text-center">
                <h2>Text</h2>
                <p>More text describing the heading!</p>
                <span class="glyphicon glyphicon-leaf size"></span>

            </div>
                    <div class="col-sm-4 text-center">
                <h2>Text</h2>
                <p>More text describing the heading!</p>
                <span class="glyphicon glyphicon-hourglass btn-lg"></span>

            </div>

            <div class="col-sm-4 text-center">
                <h2>Text</h2>
                <p>More text describing the heading!</p>
                <span class="glyphicon glyphicon-plus btn-lg"></span>
            </div>

        </div>

    </div>
</body>

So everything that has resolution < tablet resolution will see the black head puppy.

@media (max-width: 768px) {
  .jumbotron{
    background-position: 100% 50%;
  }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download