Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Framework Basics Build a Website with Bootstrap Building the Hero Component

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

stlying the jumbotron

Hello!

If you have taken this course(Build a Website with Bootstrap) stage 3, you will understand this question.

1) main-b.png has dimensions of 1512 x 951, but when you view the code, you see that the picture does not reach the full height of the screen, even with a 951px height. Furthermore, background-position:200% 100% does not cause main-bg.png to cover the entire screen? What is really happening with main-bg.png and background-position?

2) In fact, padding:200px 0 140px 0; causes main-bg.png to almost cover the entire screen, so what are we trying to do by giving it a padding and background-position?

3) I don't understand why we are giving this code margin-bottom:70px. Whitout it, there is this white space at the bottom and a scroll bar to the right, and with it, the white is 3 times as big, and the scroll bar at the side becomes longer. Why create unecessary white space that causes a scroll bar to the right to be longer?

**Please answer if you are familiar with this course thanks

/*styling the jumbotron*/

     .jumbotron{
     background-image:url(img/main-bg.png);
     background-repeat:no-repeat;
     background-position:200% 100%;
     padding:200px 0 140px 0;
     margin-bottom:70px;
     }
     .device{
     width:345px;
     height:589px;
     background:url('img/device-hero.png') no-repeat;
     }
     h1{
     font-weight:200;
     margin-bottom:30px;
     }
     .lead{
     color:#d5c1f2;
     margin-bottom:75px;

     }
     .lead:nth-of-type(2){
     font-size:initial;
     margin-bottom:20px;

     }
    </style>
  </head>
  <body>

    <!--Navbar -->
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
          <a href="#" class="main-logo pull-left" href="#">Ribbit</a>
          <p class="navbar-text pull-right hidden-xs">A Treehouse Project</p>
      </div>
    </div><!-- End navbar -->

    <!-- Jumbotron -->
    <div class="jumbotron">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                      <h1>Self-destructing messages are only a hop away.</h1>
                      <p class="lead">Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!</p>
                      <p class="lead">Or download the app and try it first.</p>
                      <p>
                        <a href="#">iOS</a>
                        <a href="#">Android</a>
                      </p>
                 </div>
                 <div class="col-sm-6 hidden-xs">
                    <div class="device pull-right"></div>
                 </div>

            </div>
        </div>
    </div><!-- End Jumbotron -->

1 Answer

Vivek Marakana
Vivek Marakana
16,412 Points
Vivek Marakana
Vivek Marakana
16,412 Points

you should try background-size: cover..

Try this code:

.jumbotron{
background-image:url(img/main-bg.png);
background-repeat:no-repeat;
background-position:center;
background-size: cover;
padding:200px 0 140px 0;
margin-bottom:70px;
}