초보여서 죄송합니다 background 질문입니다.
본문
안녕하세요 html css 의 백그라운드 질문입니다.
#contents_main {
width:100%;
background-image:url(img/banner-main.jpg);
background-repeat:repeat-x;
background-position:top center;
background-size:100%;
padding-bottom:100px;
}
#contents_main .inner {
width:100%;
max-width:1300px;
margin:0 auto;
}
#contents_main .inner img {
width:100%;
max-width:1300px;
margin:0 auto;
}
제가 지금 원하는게 배너img와 그의 백그라운드img 가
창 크기에 반응하는건데요
그래서 #contents_main .inner img {width:100%;} 을 넣었구요
백그라운드에는 background-size:100%; 을 넣었더니
아래 이미지처럼 백그라운드이미지가 repeat-x; 도 안먹혀있고
와이드를 늘리면 배너가 padding-bottom:100px; 때문인지
100px 만큼 아래 이미지처럼 툭 튀어나와서 보여요;;
이럴땐 background-size:100%; 를 사용하는게 아닌것같은데요
제가 원하는데로 배너이미지와 같이 백그라운드이미지도 반응하게 하려면
어떻게 소스를 넣어야할까요?
제 홈페이지 url 은 http://night020.cafe24.com
입니다. 해답좀 알려주세요 ㅠㅠ
답변 1
제가 확인해봤을땐,
background-repeat은 먹혀있네요~^^ repeat-x로 먹혀있는데... 아래로 죽 내리려면 repeat-y를 써야합니다...
그리고 background-size의 경우 엘리먼트(div)의 크기에 맞춰서 줄려면 cover나 contain을 주는게 좋습니다...
background-size를 100%주면 배경이미지 크기를 100%로 주는 것이기때문에... 의미가 없죠^^
아래 링크를 참조하셔서 background-size의 contain과 cover의 개념에 대해서 살짝 훑어 보시면 좋을것 같습니다^^
https://developer.mozilla.org/ko/docs/Web/CSS/Scaling_background_images
