How To Fit 100% Of An Image To A Jumbotron

I have the following HTML:

Souplesse

Be a Good Sport

<

Solution 1:

If you would like the background image to fit the height of your jumbotron, but don't care about if it stretches to the entire width:

.jumbotron { background-size: auto 100%; }

If you want the background image to cover the entire height AND width of the jumbotron and you do not care about the image's aspect ratio:

.jumbotron {background-size: 100% 100%; }

If you want the background image to be cover the entire height AND width the jumbotron but you DO care about the image's aspect ratio:

.jumbotron { background-size: cover; }

That last option will have some of the image cut off if the jumbotron has a different aspect ratio than the image, but you can specify how the image is positioned with the background position property:

.jumbotron {
    /* Image in the center of container */background-position: center center;

    /*  OR Image in the center top of the container */background-position: center top;

    /*  OR Image in the center bottom of the container  */background-position: center bottom;
}

Solution 2:

Try:

.jumbotron {
  background-image:url('piscine.jpg');
  height:300px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border-bottom:1px solid #ff6a00
}

Note the:

background-size: auto 100%;

The first value is the width, the second value is the height. It is compliant to use px or % for those values.

Share