divideの背景としてブーストアイコンを使用

Question

私はこれを達成しようとしています。私は、この高速で、あなたのニーズに応じて変更することができなかった背景

Answer 1

としてブートストラップのアイコンを使用します。おそらく

p { 
 
    margin-bottom: 1em; 
 
    color: #fff; 
 
    font-size: 15px; 
 
} 
 

 
#wrap { 
 
    width: 80%; 
 
    margin: 1em auto; 
 
    padding: 1em 5%; 
 
    background: #fff; 
 
    position: relative; 
 
    background: #007BC5; 
 
} 
 

 
.inner { 
 
    position: relative; 
 
    z-index: 2; 
 
    
 
} 
 

 
#wrap .glyphicon { 
 
    
 
    font-style: normal; 
 
    font-weight: normal; 
 
    text-decoration: inherit; 
 
    position: absolute; 
 
    font-size: 90px; 
 
    color: #639CC6; 
 
    margin-top: 25%; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div id="wrap"> 
 
    <span class="glyphicon glyphicon-thumbs-up"></span> 
 
    <div class="inner"> 
 
    <h1>Heading</h1> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p> 
 
    
 
    </div> 
 
</div>