Task 2/5 background-img scaling in .jumbotron

#1


Link to the exercise:
https://www.codecademy.com/courses/web-ext/projects/html-css-prj_bestbite


What do I have to write to make the background-image shrink to the size of the .jumbotron-div?

css:

.jumbotron {
  background: url('https://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg');
  height: 500px;
}

html:

    <div class="jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-md-offset-4">
            <h2>Browse.</h2>
            <h2>Create.</h2>
            <h2>Share.</h2>
          </div>
        </div>
      </div>
    </div>

Thank you for your help!

#2

background-size:cover;

then use
background-position:center center; to make sure it centers the picture.

** this uses the proper background size to enlarge or shrink the image to fit the jumbotron
it doesn't distort your image like traditional method of shrinking

#3

works perfectly, thx!

#4

i'm glad it did good luck

#7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.