Responsieve Bootstrap Jumbotron-achtergrondafbeelding

Ik gebruik bootstrap jumbotron en voeg een achtergrondafbeelding toe. Door het formaat van het scherm aan te passen, wordt de afbeelding betegeld en herhaald, terwijl ik wil dat de afbeelding responsief wordt verkleind.

<div class="jumbotron" style="background-image: url(https://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

Hoe zou je de afbeelding responsief maken? De site is HIER. Bedankt voor je ideeën!

Antwoord 1, autoriteit 100%

De eenvoudigste manier is om de background-sizeCSS-eigenschap om cover:

.jumbotron {
  background-image: url("../img/jumbotron_bg.jpg");
  background-size: cover;
}

Antwoord 2, autoriteit 15%

Dit is wat ik deed.

Overschrijf eerst de jumbotron-klasse en doe het volgende:

.jumbotron{
    background: url("bg.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

Dus nu heb je een jumbotron met een responsieve achtergrond.
Echter, zoals Irvin Zhan al antwoordde, wordt de hoogte van de achtergrond nog steeds niet correct weergegeven.

Eén ding dat u kunt doen, is uw div vullen met enkele spaties, zoals deze:

<div class="jumbotron">
    <div class="container">
        About
        <br><br><br> <!--keep filling br until the height is to your liking-->
    </div>
</div>

Of, eleganter, u kunt de hoogte van de container instellen. Misschien wilt u nog een klasse toevoegen, zodat u de Bootstrap-containerklasse niet overschrijft.

<div class="jumbotron">
    <div class="container push-spaces">
        About
    </div>
</div>
.push-spaces
{
    height: 100px;
}

Antwoord 3, autoriteit 9%

Ik ontdekte dat dit perfect voor mij werkte:

.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}

U kunt het formaat van uw scherm wijzigen en het zal altijd 100% van het venster in beslag nemen.

Antwoord 4, autoriteit 9%

Dit is hoe ik het doe:

<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
  <h1>Hello</h1>
</div>

<style>
        .jumbotron {
            background: url("https://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }
</style>

<div class="jumbotron"  style="background-image: url(https://yourImageUrl.jpg); background-size: 100% 100%;">
    <h1>Welcome</h1>
    <p class="lead">Your message here</p>
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

.jumbotron {
   background: url('backgroundimage.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}