css 이미지 틴트 효과, 반응형 div 가로 2열 배치 방법

1. 이미지 배경이 너무 밝으면 흰 글씨가 안보이기 떄문에 이미지에 틴트 효과

.container-item1 {
  background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(img-1.jpg);
background-size: cover;
}

2. 가로 2열 배치

<div class="container-bg">
    <div class="container1">
    <div class="container2">
    <div class="container3">
    <div class="container4">
</div>
<div style="clear:both;"></div>

.container-bg{}
.container1{float:left; width:50%}

@media screen and (max-width:992px){
.container1{ float:none; width:100%;}
}