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

时间:2017-05-10 07:56:15

标签: html css image twitter-bootstrap resize

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%;  
}
编辑:谢谢!我把背景尺寸:封面放在首位,但没有注意到由于白色条带的差异直到我使用了不同的图像。再次感谢。

3 个答案:

答案 0 :(得分:0)

使用background-size属性:

background-size: cover;

答案 1 :(得分:0)

background-size: cover;添加到.jumbotron

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

您可以使用此代码

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>