divを親divの背景画像に合わせる

Question

私は2つのdivを1つずつ持っています。 ボトムDIVは、2列の背景画像を有する40％の幅と他の60％

.container.style-2 { 
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC'); 
     background-repeat: repeat-y; 
     background-position: 40% 0; 
    } 

    .container.style-2:before { 
     height: 100px; 
     width: 100%; 

     margin-top: -100px; 
     position: absolute; 
     content: ''; 
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC'); 
     background-repeat: no-repeat; 
     background-position: 40% 0; 
    } 

    .container.style-2:after { 
     height: 150px; 
     width: 100%; 

     position: absolute; 
     content: ''; 
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC'); 
     background-repeat: no-repeat; 
     background-position: center; 
     background-position: 40% 0; 
    } 

1つがトップDIVは600PXに二つのdivカラム内部の最大幅を有し、40％の幅で1とブラウザウィンドウの幅が600PX以下であれば、他の60％

.container .row .col-1, .container .row .col-2 { 
     display: inline-block; 
     float: left; 
    } 

    .container .row .col-1 { 
     width: 40%; 
     background-color: #00ffff; 
    } 

    .container .row .col-2 { 
     width: 60%; 
     background-color: #ff0000; 
    } 

背景画像とDIV列が完全に整列するが、2つの任意の広いは不整列し始めます。

上部と下部のdiv列を揃えることはできますか？

救助にCSS calc任意のヘルプこのCodePen

おかげ

Answer 1

http://codepen.io/ryantdecker/pen/zBoNWK

を参照してください - メディアクエリと一緒に。

@media (min-width:601px) { 
    .style-2:before, 
    .style-2:after { 
    background-position: calc(50% + 240px);} 
} 

max-width:600px;はあなた.rowに引き継ぎ、と（自分のコンテンツの列は、（グループとして）整列の中心であることを始めるので、あなたもページ/ラッパーの中心にあなたの背景の相対を持っている必要がありたら50%を）、それらは互いに一定の位置にとどまる。

しかし、列が等しくないので、実際には画像を中心から静的な量（親の幅の％ではなく、列が変更されていなくても変化しません）からオフセットする必要があります。ここではcalcが入ります。240pxは小さな列の幅です。中央からどのくらい離れているので、画像を整列させる必要があります。