div를 부모 div의 배경 이미지에 맞 춥니 다

두 div가 하나씩 있습니다. 바닥 DIV 두 개의 열, 40 %의 폭 이상의 상단 DIV는 600PX에서 두 DIV 컬럼 내부의 최대 폭을 갖고div를 부모 div의 배경 이미지에 맞 춥니 다

.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; 
    }

다른 60 %, 한 40 %의 폭으로하고있는 배경 이미지가 브라우저 창 폭 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 컬럼 완벽한 정렬 있지만 넓게는 두 잘못 정렬하기 시작한다.

상단 및 하단 div 열을 정렬 할 수 있습니까?

은 구조에 어떤 도움

출처

2016-06-21 Chris

바이올린은 위 코드와 일치하지 않지만 before : : after 의사 요소를 사용합니다. 필자는 바이올린을 기반으로 아래에 답했습니다. 그러나 질문을 찾은 다른 사람들이 쫓겨나지 않도록 일치 시키면 좋습니다. – ryantdecker

@ryantdecker 의사 요소를 포함하도록 코드가 업데이트되었습니다. – Chris

위대한 - 감사합니다! – ryantdecker

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

CSS calc이 CodePen

감사를 참조하십시오 - 함께 미디어 쿼리. max-width:600px; 일단

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

은 .row에 인계하고, 콘텐츠 열 (그룹으로) 정렬 중심으로 시작, 그래서 당신은 또한 페이지/래퍼의 중심에 당신의 배경 상대를합니다 (이 필요합니다 50% in calc)을 사용하여 서로 일정한 위치에 머무르게됩니다.

그러나 열의 수가 같지 않으므로 실제로 이미지가 중심에서 정량만큼 오프셋됩니다 (열의 변경이없는 경우에도 변경되는 부모의 너비는 아닙니다). 어느 곳에서 calc가 나오는지 알 수 있습니다. - 240px은 작은 열의 너비이며, 중앙에서 얼마나 멀리 떨어져 있어야 이미지 정렬을 유지할 수 있습니다.

출처

2016-06-22 01:03:47 ryantdecker

div를 부모 div의 배경 이미지에 맞 춥니 다

답변

관련 문제