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%;  
}

编辑：谢谢！我把背景尺寸：封面放在首位，但没有注意到由于白色条带的差异直到我使用了不同的图像。再次感谢。

Answer 1

使用background-size属性：

background-size: cover;

Answer 2

将background-size: cover;添加到.jumbotron。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用此代码

background：url（）center center 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>

如何完全适合这种背景图像

3 个答案: