한쪽에 랩을 넘어 배경 이미지 패턴을 확장

Question

나는 이런 글이 있습니다 "견적 - 전화 - 아웃"div에 대한 패턴. 그들은 랩 안에 있기 때문에 반복되는 패턴을 줄 바꿈 길이만큼 연장하고 나머지 절반에는 단색 배경색을 유지할 수있는 방법이 있습니까?

Here is a visualization of what I have now. 흰색 테두리가 추가되어 줄 바꿈이 끝나는 위치가 쉽게 표시됩니다. 브라우저의 가장자리에 무한히 반복되는 패턴이 랩처럼 구속되지 않고 필요합니다.

감사합니다.

Answer 1

내가 너를 정확하게 이해했다면, 너는이게 너 일거야. View it on JSFiddle

CSS는

.wrap { 
    width: 150px; 
    height: 30px; 
    border: 1px solid #2f6497; 
    position: relative; 
} 
.phone-call-out { 
    background: #eee; 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 
.estimate-call-out { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    width: 300px; 
    background: #bbb; 
    height: 100%; 
}