안녕하세요, 스킨 하나 만들고 있는데 이쪽은 문외한이라 잘 안되네요.
여러 영역이(div로 만들어진) 있고 특정 한 영역에만 배경그림을 고정하고 싶어요.
그런데 문제는 background-attachment:fixed 속성을 주면, 제가 원하는 영역을 기준으로 배경그림을 배치하지 않고
전체 화면을 기준으로 배경그림을 배치한다는 거에요.
저는 그 특정 한 영역에만 배경그림을 적용하고 싶고 그 위치를 기준으로 배치하고 싶거든요.
아래 테스트 하던 파일 붙일게요.
가로 600px로 정의된 div 영역에 고정된 배경그림을 갖다 붙이고 싶은데,
그 배경그림이 전체화면 기준으로 배치되서 문제!!
부디 도움 좀 부탁드려요.
<body>
<div style="width:100%; height:100%; text-align:center;">
<div style="position:relative; width:800px; height:100%; margin:0 auto; border:1px solid black;">
<div style="float:right; width:180px; height:300px; border:1px solid red;">
</div>
<div style="float:left; width:600px; height:300px; border:1px solid blue;
background-attachment:fixed; background-image:url(./images/IMG_0813.png); background-repeat: no-repeat; background-position: left top;">
</div>
</div>
</div>
</body>
아, 익스8에서 테스트하고 있습니다.
여러 영역이(div로 만들어진) 있고 특정 한 영역에만 배경그림을 고정하고 싶어요.
그런데 문제는 background-attachment:fixed 속성을 주면, 제가 원하는 영역을 기준으로 배경그림을 배치하지 않고
전체 화면을 기준으로 배경그림을 배치한다는 거에요.
저는 그 특정 한 영역에만 배경그림을 적용하고 싶고 그 위치를 기준으로 배치하고 싶거든요.
아래 테스트 하던 파일 붙일게요.
가로 600px로 정의된 div 영역에 고정된 배경그림을 갖다 붙이고 싶은데,
그 배경그림이 전체화면 기준으로 배치되서 문제!!
부디 도움 좀 부탁드려요.
<body>
<div style="width:100%; height:100%; text-align:center;">
<div style="position:relative; width:800px; height:100%; margin:0 auto; border:1px solid black;">
<div style="float:right; width:180px; height:300px; border:1px solid red;">
</div>
<div style="float:left; width:600px; height:300px; border:1px solid blue;
background-attachment:fixed; background-image:url(./images/IMG_0813.png); background-repeat: no-repeat; background-position: left top;">
</div>
</div>
</div>
</body>
아, 익스8에서 테스트하고 있습니다.
댓글 12개
음? 이상하네요 전잘되는데;;
<div style="width:100%; height:100%; text-align:center;">
<div style="position:relative; width:800px; height:100%; margin:0 auto; border:1px solid black;">
<div style="float:right; width:180px; height:300px; border:1px solid red;">
</div>
<div style="float:left; width:600px; height:300px; border:1px solid blue; overflow:auto;">
<table width=100%>
<td height=500px style="background-attachment:fixed; background-image:url(./images/IMG_0813.png); background-position:center;">
</td></tr>
</table>
</div>
</div>
</div>
말씀드린대로 센터두고 고정값지정하면 파폭이랑 익스에서만봤는데 잘돼는데;;
<div style="width:100%; height:100%; text-align:center;">
<div style="position:relative; width:800px; height:100%; margin:0 auto; border:1px solid black;">
<div style="float:right; width:180px; height:300px; border:1px solid red;">
</div>
<div style="float:left; width:600px; height:300px; border:1px solid blue; overflow:auto;">
<table width=100%>
<td height=500px style="background-attachment:fixed; background-image:url(./images/IMG_0813.png); background-position:center;">
</td></tr>
</table>
</div>
</div>
</div>
말씀드린대로 센터두고 고정값지정하면 파폭이랑 익스에서만봤는데 잘돼는데;;
fixed 속성주고 이미지를 배치시키면 되긴 하는데, 배경이미지의 fixed 속성자체가 전체화면을 기준으로 배치하기 때문에 제가 원하는 정확한 위치에 대부분의 브라우저에서 동일한 결과를 기대하기가 힘들어서요.
이를테면, 중앙정렬해서 왼쪽으로 a 픽셀만큼 아래로 b 퍼센트만큼의 위치에 div 영역을 지정하고 거기 배경이미지를 고정하고 싶은거죠. 해당 영역을 기준으로 fixed 속성이 작용하면 간단한 일이지만, 전체화면 기준으로 작용하니까 이걸 맞추는 게 좀 주먹구구식 같고 만족할 만한 결과를 얻기가 힘들어서요. 그러니까 특정영역의 왼쪽 상단 첫 번째 픽셀에 배경이미지의 왼쪽 상단 첫 번째 픽셀을 일치시키고 싶어요. 물론, 텍스트는 스크롤되대 배경은 고정이구요.
이를테면, 중앙정렬해서 왼쪽으로 a 픽셀만큼 아래로 b 퍼센트만큼의 위치에 div 영역을 지정하고 거기 배경이미지를 고정하고 싶은거죠. 해당 영역을 기준으로 fixed 속성이 작용하면 간단한 일이지만, 전체화면 기준으로 작용하니까 이걸 맞추는 게 좀 주먹구구식 같고 만족할 만한 결과를 얻기가 힘들어서요. 그러니까 특정영역의 왼쪽 상단 첫 번째 픽셀에 배경이미지의 왼쪽 상단 첫 번째 픽셀을 일치시키고 싶어요. 물론, 텍스트는 스크롤되대 배경은 고정이구요.
게시글 목록
| 번호 | 제목 |
|---|---|
| 284508 | |
| 284499 | |
| 284492 | |
| 284490 | |
| 284484 | |
| 284481 | |
| 284478 | |
| 284476 | |
| 284474 | |
| 284472 | |
| 284470 | |
| 284458 | |
| 284457 | |
| 284454 | |
| 284453 | |
| 284447 | |
| 284446 | |
| 284444 | |
| 284441 | |
| 284440 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기