css 에서 백그라운드 관련 질문드립니다.
관련링크
본문
안녕하세요 다들 수고들이 많으시죠
바쁘신 가운데 두가지만 질문을 드립니다..
4처럼 백그라운드 지정을 해주면 정상적으로 나오지 않아서
이리 저리 해봐도 않되어서 이렇게 질문을 드립니다..
질문 1. 백그라운드를 jpg나 png 로 적용하는 방법
질문2. 가능 하다면 백그라운드는 좌측과 우측에 따로 따로 적용을 어떻게 해야 하는지
여러 고수님들의 실력을 배워보고자 합니다..
그럼 수고하세요
답변 4
고수님들 제발 부탁드려요
링크 걸어 두신게 없으세요.
구글링으로 background-image css 검색해보세요.
좌측과 우측을 따로 적용하려면 2개의 div 태그로 공간을 2곳으로 만들어야 합니다.
back_1{background-image:url(경로);}
back_2{background-image:url(경로);}
이런식입니다. 백그라운드 이미지는 반복이 자동 반복이므로 패턴인 이미지인지 큰 이미지인지에 따라 반복요소도 잘 선택해야합니다. no-repeat 입니다.
결국은 구글링 하셔요~
질문에 이해 한게 맞다면.....
좌측을 영역과 중앙영역에 각각 배경이미지를 적용하고 싶으신거같애요.
style="background-image......"
위와 같은 스타일 태그를....div 로 영역을 잡은 거라면
<div style....
내용
</div>
<td style....
내용
</td>
위와 같은 형태로 스타일 태그 적용해주시면 되구요.
저렇게 내용...이라고 하는 부분에 텍스트를 입력하면 배경이미지 위로 글씨가 뜨게 되요!!
질문1 의 답변: jpg 나 png 나 적용은 똑같이 다 가능함.
질문2 의 답변:
<style>
.a {width:100px; height:100px; border:solid 1px red; float:left; background:url('이미기경로') no-repeat 20px 20px;}.b {width:100px; height:100px; border:solid 1px blue; float:left; background:url('이미기경로') no-repeat 20px 20px;}
</style>
<div class="a">a</div>
<div class="b">b</div>
* no-repeat 뒤에 20px 20px 각각 left 와 top 입니다.