Wie dieses Hintergrundbild passen vollständig

Question

The stripped background is just a little off on the left and I haven't been able to make it fit. Can someone help me out please? Thanks in advance!

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4" style="border-radius: 26px 3px 3px; background-color: #982d41"> 
     <h2>About</h2> 
    </div> 
    <div class="col-md-4" style="background-color:#d77082"> 
     <h2>Menu</h2> 
    </div> 
    <div class="col-md-4" style="border-radius: 0px 26px 3px 3px; background-color:#ecafa9"> 
     <h2>Blog</h2> 
    </div> 



    <div class="jumbotron"> 
    <h1>Lyn's Site</h1> 
    <div class="container"> 
...  
</div> 
    <p>Just a test</p> 
</div> 

CSS

.jumbotron { 
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCA3_YcNlv-lliZZBuZZfvYi-H-qQ_EIe7Qf5AXfyCq9xPcUZp); 
    margin: auto; 
    height: 250px; 
    margin-top: 50px; 
    width: 100%; 
} 

EDIT: Vielen Dank! Ich habe zunächst Hintergrundgröße: Cover eingefügt, aber den Unterschied aufgrund der weißen Streifen nicht bemerkt, bis ich ein anderes Bild verwendet habe. Danke noch einmal.

Answer 1

Verwenden Sie die Hintergrund-Eigenschaft size:

background-size: cover; 

Answer 2

Added background-size: cover;-.jumbotron.

.jumbotron { 
 
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCA3_YcNlv-lliZZBuZZfvYi-H-qQ_EIe7Qf5AXfyCq9xPcUZp); 
 
    background-size: cover; 
 
    margin: auto; 
 
    height: 250px; 
 
    margin-top: 50px; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4" style="border-radius: 26px 3px 3px; background-color: #982d41"> 
 
     <h2>About</h2> 
 
    </div> 
 
    <div class="col-md-4" style="background-color:#d77082"> 
 
     <h2>Menu</h2> 
 
    </div> 
 
    <div class="col-md-4" style="border-radius: 0px 26px 3px 3px; background-color:#ecafa9"> 
 
     <h2>Blog</h2> 
 
    </div> 
 

 

 

 
    <div class="jumbotron"> 
 
     <h1>Lyn's Site</h1> 
 
     <div class="container"> 
 
     ... 
 
     </div> 
 
     <p>Just a test</p> 
 
    </div>

Answer 3

können Sie diesen Code verwenden

background: url() mitte repeat-x;

.jumbotron { 
 
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCA3_YcNlv-lliZZBuZZfvYi-H-qQ_EIe7Qf5AXfyCq9xPcUZp) center center repeat-x; 
 
    height: 250px; 
 
    margin-top: 50px; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4" style="border-radius: 26px 3px 3px; background-color: #982d41"> 
 
     <h2>About</h2> 
 
    </div> 
 
    <div class="col-md-4" style="background-color:#d77082"> 
 
     <h2>Menu</h2> 
 
    </div> 
 
    <div class="col-md-4" style="border-radius: 0px 26px 3px 3px; background-color:#ecafa9"> 
 
     <h2>Blog</h2> 
 
    </div> 
 

 

 

 
    <div class="jumbotron"> 
 
    <h1>Lyn's Site</h1> 
 
    <div class="container"> 
 
...  
 
</div> 
 
    <p>Just a test</p> 
 
</div>