배경화면이 적용된 div 위에 div 배치하기

배경화면이 적용될 div의 css 속성을 아래와 같이 지정하였다. 

 

background-image:url('url 경로'); background-repeat : no-repeat; background-size: 100% 100%; 

 

그 후 아래와 같이 div 위에 배경화면 안에 배치될 div를 코딩했다.

 

  

  

 

톰캣을 실행 결과 화면에 div가 나오지 않는다. 

 

component div의 크기가 있더라도 background div의 width와 height를 지정해주지 않았기 때문이다. 

 

그래서 width, height를 주려고 했으나 %는 적용이 되지 않았다. 

그렇다고 px값을 입력하면 반응형 웹을 만들기에는 부적절하기 때문에 

고민 끝에 padding을 통해 상하 %를 입력하여 원하는 형태의 이미지 배치를 얻을 수 있었다. 

 

아래는 background div의 css이다.

 

background-image:url('url 경로'); background-repeat : no-repeat; background-size: 100% 100%; padding: 30% 0;  overflow: hidden;  

 

overflow:hidden; 을 입력한 이유는 bxslider를 사용시 횡스크롤이 생기는 것을 방지하기 위함이다.