Не показывать фоновое изображение во всей строке

Question

Я пытаюсь показать изображение полной ширины на фоне трех столбцов. Я подумал, что если я упакую три столбца в div и поставлю фон в div, это произойдет, вместо этого он покажет фон на весь экран. Как сделать так, чтобы он просто показывался в фоновом режиме под линией hr.

Поэтому я не хочу, чтобы фон показывался в разделах: Что такое Apple? Яблоня (Malus domestica) - это лиственное дерево в розовой семье, известная своими сладкими, фруктовыми фруктами, яблоком.

Вот мой bootply: http://www.bootply.com/BT0SWRh3aq

Вот мой HTML:

 <div class="content-section-a"> 

     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h2>What is an Apple?</h2> 
        <p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p> 
        <hr class="section-heading-spacer"> 
        <div class="clearfix"></div> 
        </div> 
       <div class="row" id="bg-pink-data-points"> 
       <div class="col-md-4 col-xs-12"> 
        <h3>LADY</h3> 
        <p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p> 
       </div> 
       <div class="col-md-4 col-xs-12"> 
        <h3>GRANNY SMITH</h3> 
        <p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p> 
       </div> 
       <div class="col-md-4 col-xs-12"> 
        <h3>GOLDEN DELICIOUS</h3> 
        <p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p> 
       </div> 
        </div> 
     </div> 
     <!-- /.container --> 

    </div></div> 

Here's a CSS: 

    #bg-pink-data-points { 
      background-image: url("http://10steps.sg/wp-content/uploads//2012/11/White-christmas-light-background.jpg"); 
     } 

.content-section-a { 
    padding: 50px 0; 
} 

Answer 1

Похоже, у вас есть незначительные нарушения в вашем HTML структуры .row в другом .row, ну вы можете попробовать это:

<div class="content-section-a"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h2>What is an Apple?</h2> 
        <p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p> 
        <hr class="section-heading-spacer"> 
        <div class="clearfix"></div> 
       </div>     
      </div> 
      <div class="row" id="bg-pink-data-points"> 
       <div class="col-md-4 col-xs-12"> 
        <h3>LADY</h3> 
        <p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p> 
       </div> 
       <div class="col-md-4 col-xs-12"> 
        <h3>GRANNY SMITH</h3> 
        <p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p> 
       </div> 
       <div class="col-md-4 col-xs-12"> 
        <h3>GOLDEN DELICIOUS</h3> 
        <p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p> 
       </div> 
      </div> 
     </div> 
     <!-- /.container --> 
    </div> 

Демо URL:http://www.bootply.com/0m5JJ6pMM0

Если хочет играть с Предыстория быть расширенным, вы также можете играть с тем же свойством CSS, которое написано для фона #bg-pink-data-points:

#bg-pink-data-points { 
    background-image: url("http://10steps.sg/wp-content/uploads//2012/11/White-christmas-light-background.jpg"); 
    padding: 10px; 
} 

Вы можете играть с еще несколькими опциями. Демо URL: http://www.bootply.com/Poi6HlXOa8

Answer 2

Снимите float: left; на <div class="col-lg-12"> или переписать его с float: none;

Answer 3

Пожалуйста обернуть .col-lg-12 в ряд, чтобы установить его надлежащее макет ..

<div class="content-section-a"> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <h2>What is an Apple?</h2> 
       <p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p> 
       <hr class="section-heading-spacer"> 
      </div> 
     </div> 
     <div class="row" id="bg-pink-data-points"> 
      <div class="col-md-4 col-xs-12"> 
       <h3>LADY</h3> 
       <p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>GRANNY SMITH</h3> 
       <p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p> 
      </div> 
      <div class="col-md-4 col-xs-12"> 
       <h3>GOLDEN DELICIOUS</h3> 
       <p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p> 
      </div> 
     </div> 
     <!-- /.container -->