html - セパレーターとヘッダーを結合

Question

セパレーターとヘッダーを表示するコードがいくつかあります

私は現在持っています

.content-wrap {
    width: 1024px;
    margin: 0 auto;
}

.content-wrap section section {
    background: none;
    margin: 0;
}
.content-wrap section {
position: relative;
padding: 125px 0 25px 0;
background: url(http://www.lebiscuit.com.mx/section-sep.png) repeat-x left 25px;
}



h1 {
    font-size: 40px;
    float: right;
    line-height: 50px;
    letter-spacing: -0.9px;
    color: #ffffff;
    padding:25px 0;
}


body {background-color:#b0c4de;}

これはhtmlです

<div class="content-wrap">
     <section id="services" >
             <h1>title</h1>
    </section>    
</div>

望ましい出力は

セパレーターを保持し、セパレーターを h1 に追加するにはどうすればよいですか?

ここでjsfiddle htmlを見つけてください

何かのようなもの

<h1 class="bck"></div>

.bck h1
{
float: right
margin: 10px
background-color:transparent;
}

Answer 1

セクションで相対配置を使用しているため、見出しで絶対配置を使用することをお勧めします ( h1):

#services h1 {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    right: 0;
    background-color: lightSteelBlue;
}

background-color境界線がヘッダーを通過しないようにするためです。

http://jsfiddle.net/ExplosionPIlls/HR2Xa/2/