Double fond

Question

J'essaie d'obtenir un affichage similaire pour la partie en surbrillance sur l'image avec un arrière-plan jaune et noir. Les trois boîtes affichant la moitié dans le jaune et la moitié dans le noir bg.

Quelqu'un peut-il m'aider à faire face à cela dans CSS BOOTSTRAP.

Merci d'avance.

http://i.stack.imgur.com/yPj0w.png

Answer 1

Les 3 cases sont tout simplement en position absolue sur une image d'arrière-plan. Voir this-

#bgbox { 
 
    background-color: black; 
 
    border-left: 50px solid yellow; 
 
    width:50px; 
 
    height:100px; 
 
} 
 
#top { 
 
    position:absolute; 
 
    top:40px; 
 
    left:40px; 
 
    width:30px; 
 
    height:30px; 
 
    background-color:blue; 
 
    
 
}

<div id="bgbox"> 
 
</div> 
 
<div id="top"> 
 
</div>

Answer 2

position d'utilisation pour ce faire. Demo

<div class="top"> 
    <div class="inner"></div> 
</div> 
<div class="buttom"> 

</div> 

.top{ 
    position:relative; 
    width:100%; 
    height:300px; 
    background-color:yellow; 
} 
.inner{ 
position:absolute; 
    width:300px; 
    height:300px; 
    top:50px; 
    left:100px; 
    background-color:red; 
    z-index:3; 

} 
.buttom 
{ 
position:relative; 

    width:100%; 
    height:300px; 
    background-color:black; 

} 

Answer 3

Utilisez la classe Bootstrap et les boîtes de arrangent valeur supérieure de la marge. regarde le code ci-dessous. l'exécuter en mode plein écran

.yellowbg { background-color: #beb333; height: 300px; } 
 
     .blackbg { background-color: #000; height: 300px; } 
 
     .yellowboxes { height: 182px; margin-top: -118px; background-color: #e3cf00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
     <div class="row"> 
 
      <div class="col-xs-12"> 
 
       <div class="yellowbg"> 
 
       </div> 
 
       <div class="blackbg"> 
 
        <div class="row"> 
 
         <div class="col-lg-2 col-lg-offset-3 col-md-2 col-md-offset-3 col-sm-offset-3 col-sm-2"> 
 
          <div class="yellowboxes"> 
 
          Box 1 
 
          </div> 
 
         </div> 
 
         <div class="col-lg-2 col-md-2 col-sm-2"> 
 
          <div class="yellowboxes"> 
 
          Box 2 
 
          </div> 
 
         </div> 
 
         <div class="col-lg-2 col-md-2 col-sm-2"> 
 
          <div class="yellowboxes"> 
 
          Box 3 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>