CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
natem1270
natem1270

Reputation: 207

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>

Upvotes: 1

Views: 5668

Answers (4)

Michael Coker
Michael Coker

Reputation: 53684

To have the jumbotron scale and always show the full background image, make the height of the jumbotron 0, then use a percentage of padding that matches the aspect ratio of the image to create that same amount of padding in the jumbotron.

The image is 1920x1080. Represented as a percentage, 1080/1920 = 56.25%. Applied as a top or bottom padding, that will make jumbotron match that aspect ratio. Then you can absolutely position the text inside the jumbotron wherever you want. I introduced an element called .jumbotron-text for that.

* {
  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-text {
  position: absolute;
  top: 2em;
  left: 0;
  right: 0;
}

.jumbotron {
  height: 0;
  position: relative;
  padding: 56.25% 0 0 !important;
  background: url('http://i.imgur.com/OXMygdn.jpg') 0 0 no-repeat;
  background-size: cover;
}
<!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">
    <div class="jumbotron-text">
      <h1>Website Heading</h1>
      <p>Information about the website!</p>
    </div>
  </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>

Upvotes: 0

Nicholas
Nicholas

Reputation: 3784

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

Upvotes: 2

Zeinab
Zeinab

Reputation: 461

you should add the following rules to the .jumbotron 

background-repeat:no-repeat;
background-size:contain;
background-position:center;

Upvotes: 1

Milan_w
Milan_w

Reputation: 321

While waiting for the code, did you add the responsive class to the image tag?

<img src="picture.jpg" class="img-responsive">

Upvotes: -1

Related Questions