안녕하세요, 스킨 하나 만들고 있는데 이쪽은 문외한이라 잘 안되네요.
여러 영역이(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안에 table을 삽입하시구요 현재 div전체에 백그라운드가 적용되잇으신데
그내용을 지우시고 table 삽입하면
<table><tr><td></td></tr></table>이렇게 내용이 삽입되실거에요
여기서 td에 백그라운드를 삽입하시면 정확히 원하는 위치에 적용되실거에요
table의 크기와 td들의 크기가 중요하겟죠
300짜리 table에서 왼쪽 여백 100을주고 오른쪽에 200짜리 bg를 넣으신다면
<table><tr><td width="100"> </td><td width="200"> </td></tr></table>이런식으로해서
200짜리에 넣으시면 적용되실거에요
만약 200짜리 bg가 왼쪽으로 밀린다면 100짜리가 여백이라 그런거니 거기에 투명 이미지 100짜리를 삽입하시면 딱될겁니다
그내용을 지우시고 table 삽입하면
<table><tr><td></td></tr></table>이렇게 내용이 삽입되실거에요
여기서 td에 백그라운드를 삽입하시면 정확히 원하는 위치에 적용되실거에요
table의 크기와 td들의 크기가 중요하겟죠
300짜리 table에서 왼쪽 여백 100을주고 오른쪽에 200짜리 bg를 넣으신다면
<table><tr><td width="100"> </td><td width="200"> </td></tr></table>이런식으로해서
200짜리에 넣으시면 적용되실거에요
만약 200짜리 bg가 왼쪽으로 밀린다면 100짜리가 여백이라 그런거니 거기에 투명 이미지 100짜리를 삽입하시면 딱될겁니다
소스에 문제가 있으셨네요^^;;
현재
<td height=500px style="background-attachment:fixed; background-image:url(./images/IMG_0813.png); background-repeat: no-repeat; background-position: left top;">
이런소스가 잇으신대요 td에 height값때문에 스크롤생기는건데요 저걸 크기에맞춰서 잡아주시거나
그게 귀찮으시면
overflow:auto; 이부분에서 auto를 hidden으로해주셔도되요~
현재
<td height=500px style="background-attachment:fixed; background-image:url(./images/IMG_0813.png); background-repeat: no-repeat; background-position: left top;">
이런소스가 잇으신대요 td에 height값때문에 스크롤생기는건데요 저걸 크기에맞춰서 잡아주시거나
그게 귀찮으시면
overflow:auto; 이부분에서 auto를 hidden으로해주셔도되요~
아~ 그러면
<td height=500px style="background-attachment:fixed; background-image:url(./images/IMG_0813.png); background-repeat: no-repeat; background-position: left top;">
이내용을
<td height="500" style="background-attachment:fixed; background-image:url(./images/IMG_0813.png); background-position:center;">
이렇게 해보시겟어요?? 반복여부지우고 포지션 센터둔건대 포지션은 딱히 안주셔도되구요
<td height=500px style="background-attachment:fixed; background-image:url(./images/IMG_0813.png); background-repeat: no-repeat; background-position: left top;">
이내용을
<td height="500" style="background-attachment:fixed; background-image:url(./images/IMG_0813.png); background-position:center;">
이렇게 해보시겟어요?? 반복여부지우고 포지션 센터둔건대 포지션은 딱히 안주셔도되구요
게시글 목록
| 번호 | 제목 |
|---|---|
| 284508 | |
| 284499 | |
| 284492 | |
| 284490 | |
| 284484 | |
| 284481 | |
| 284478 | |
| 284476 | |
| 284474 | |
| 284472 | |
| 284470 | |
| 284458 | |
| 284457 | |
| 284454 | |
| 284453 | |
| 284447 | |
| 284446 | |
| 284444 | |
| 284441 | |
| 284440 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기