background-position 관련 답변 좀 부탁드립니다!!
본문
------
위와같은 이미지를 만들었습니다. 가로 1000px ㅡ 세로 90px
하나의 이미지에 총 8개의 그림이고, 한 그림당 가로 125px ㅡ 세로 90px 입니다
원래 같은 경우 하나 씩 이미지를 만들어 총 8개의 이미지를 만들었는데
지금 하나의 이미지로 작업을 해보려니 제 머리가 안좋은건지 1시간째 헛바퀴질만 하고 있습니다
원래 하나의 이미지로 8개의 링크를 사용할 수 없나요?
아니면 포지션이 잘못된것인지, 또는 소스가 잘못된건지 8개의 a 태그를 만드니까 크롬-개발자도구에서 8개의 이미지로 만들어지더라구요.
소스입니다.
#sub_local_bmenu {width:100%; min-width:1200px; background:#f1f1f1; margin-bottom:20px;clear:both; }
.localb {width:1000px; margin:0 auto; height:90px;}
.localb ul {}
.calb_not a {display:block; width:125px; height:90px; text-indent:-5555px; background:url(/img/localb.png) no-repeat 0 0;}
.calb_ent a {display:block; width:125px; height:90px; text-indent:-5555px; background:url(/img/localb.png) no-repeat 125px 0;}
.calb_qna a {display:block; width:125px; height:90px; text-indent:-5555px; background:url(/img/localb.png) no-repeat 375px 0;]
.calb_vie a {display:block; width:125px; height:90px; text-indent:-5555px; background:url(/img/localb.png) no-repeat 500px 0;}
.calb_gow a {display:block; width:125px; height:90px; text-indent:-5555px; background:url(/img/localb.png) no-repeat 625px 0;}
.calb_kin a {display:block; width:125px; height:90px; text-indent:-5555px; background:url(/img/localb.png) no-repeat 750px 0;}
.calb_dog a {display:block; width:125px; height:90px; text-indent:-5555px; background:url(/img/localb.png) no-repeat 875px 0;}
.calb_bon a {display:block; width:125px; height:90px; text-indent:-5555px; background:url(/img/localb.png) no-repeat 1000px 0;}
<div id="sub_local_bmenu">
<div class="localb">
<ul>
<li class="calb_not"><a href="#">공지사항</a></li>
<li class="calb_ent"><a href="#">이벤트</a></li>
<li class="calb_qna"><a href="#">질문답변</a></li>
<li class="calb_vie"><a href="#">상품후기</a></li>
<li class="calb_gow"><a href="#">바로가기</a></li>
<li class="calb_kin"><a href="#">즐겨찾기</a></li>
<li class="calb_dog"><a href="#">개인결제</a></li>
<li class="calb_bon"><a href="#">최근본상품</a></li>
</ul>
</div>
</div>
답변 1
일단 소스를 봤을때는 구조는 제대로 잡으신것 같습니다만..
현재 대로라면 이미지가 안보이지 않나요?
포지션 값을 양수로 주셨는데 음수로 바꿔보십시오.
예를들어
background:url(/img/localb.png) no-repeat 125px 0;
라면 백그라운드 이미지가 bg가 출력될 영역의 외곽 기준으로 왼쪽에서 125px 되는곳에 위치하라는 명령이므로
이미지가 화면밖으로 나가게 되는겁니다.
첫번째 이미지라면
background:url(/img/localb.png) no-repeat 0 0;
두번째 이미지라면
background:url(/img/localb.png) no-repeat -125px 0;
세번째 이미지라면
background:url(/img/localb.png) no-repeat -250px 0;
.
.
.
와 같이 css를 작성하시면 될것 같습니다.
