특정영역(div) 배경이미지 고정 정보
특정영역(div) 배경이미지 고정본문
안녕하세요, 스킨 하나 만들고 있는데 이쪽은 문외한이라 잘 안되네요.
여러 영역이(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에서 테스트하고 있습니다.
댓글 전체
이문제도 좀만더보시면 될텐데 br이 엄청많네요;;;
br대신 테이블로 높이지정을 해보심이 더깔끔하실텐데..
bg를 넣고싶은 영역에 table을 넣구요 거기서 tr과 td를 이용하여서 원하는 위치 td안에 bg를 넣으신다면
딱 원하는 부분에만 들어가실거에요~
br대신 테이블로 높이지정을 해보심이 더깔끔하실텐데..
bg를 넣고싶은 영역에 table을 넣구요 거기서 tr과 td를 이용하여서 원하는 위치 td안에 bg를 넣으신다면
딱 원하는 부분에만 들어가실거에요~
소스를 보기 쉽게 수정했어요.
말씀하신대로 테이블 사용해봤지만, background-attachment:fixed일 때, 전체화면을 기준으로 배치하는 건 똑같네요.
배경이미지를 원하는 영역에 배치하는 건 위 fixed 속성만 빼면 되긴 하는데, 스크롤이 되어 버려서요. 고정하고 싶은데.
아무튼 의견 고마워요.
말씀하신대로 테이블 사용해봤지만, background-attachment:fixed일 때, 전체화면을 기준으로 배치하는 건 똑같네요.
배경이미지를 원하는 영역에 배치하는 건 위 fixed 속성만 빼면 되긴 하는데, 스크롤이 되어 버려서요. 고정하고 싶은데.
아무튼 의견 고마워요.
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짜리를 삽입하시면 딱될겁니다
말씀하신대로 해봤는데 배경이미지 삽입은 가능하지만,
스크롤 되지 않게 fixed 속성주면 여전히 똑같은 문제가 발생합니다.
(삭제)
괜찮으시다면 한 번 확인해 주시겠어요?
위 테스트 페이지의 배경이미지는 제 의도와는 다르게 전체 화면을 기준으로 배치되어 있어요.
확인해보니 익스에서만 원하는 결과를 얻을 수 없네요.
스크롤 되지 않게 fixed 속성주면 여전히 똑같은 문제가 발생합니다.
(삭제)
괜찮으시다면 한 번 확인해 주시겠어요?
위 테스트 페이지의 배경이미지는 제 의도와는 다르게 전체 화면을 기준으로 배치되어 있어요.
확인해보니 익스에서만 원하는 결과를 얻을 수 없네요.
소스에 문제가 있으셨네요^^;;
현재
<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;">
이렇게 해보시겟어요?? 반복여부지우고 포지션 센터둔건대 포지션은 딱히 안주셔도되구요
고정된 배경에 스크롤되는 텍스트를 구현하는 건 가능하지만,
배경 이미지의 위치가 전체화면을 기준으로 배치되어서요.
현재 영역을 기준으로 배치가 되어야 해상도나 브라우저에 관계없이 제가 원하는 정확한 위치에 배치 되니까요.
배경 이미지의 위치가 전체화면을 기준으로 배치되어서요.
현재 영역을 기준으로 배치가 되어야 해상도나 브라우저에 관계없이 제가 원하는 정확한 위치에 배치 되니까요.
현재 작업되신거는 해상도에따라 이미지위치가 변경되실거에요 기준이 left라서요
center로두셔야 해상도에 상관없이 무조건출력대구요
제가 해상도 크게해서 봤을때는 왼쪽에 붙어보이지만 해상도를 줄이면 꽉차서 보이네요
왼쪽에 붙여서 나오게 하고싶으시면 센터정렬로 하시고 bg를 새로자르시는게 좋을듯싶어요~
제가 이해를 잘못해서그런지;;똑뿌러진 답변을 못드리는거같네요 에고고;
center로두셔야 해상도에 상관없이 무조건출력대구요
제가 해상도 크게해서 봤을때는 왼쪽에 붙어보이지만 해상도를 줄이면 꽉차서 보이네요
왼쪽에 붙여서 나오게 하고싶으시면 센터정렬로 하시고 bg를 새로자르시는게 좋을듯싶어요~
제가 이해를 잘못해서그런지;;똑뿌러진 답변을 못드리는거같네요 에고고;
고마워요. 열심히 알려주셔서.
그런데 딱히 방법이 없는 듯한 느낌이 드네요.
절대위치(전체화면)에서 이미지를 자르던가 하는 편법으로 처리하는 건가,
다른 사람들은 이렇게 쓰질 않나 싶기도 하고.
(삭제)
위 링크가 실제 사용하려는 페이지인데요,
다른 브라우저(사파리, 파폭, 크롬, 에피파니)에서는 제가 바라는 결과가 나오는데
익스에서는 배경도 텍스트랑 같이 스크롤되어 버리거든요.
좀 더 방법을 찾아봐야겠어요. (이제 좀 그만하고 싶어요! -_-;)
그런데 딱히 방법이 없는 듯한 느낌이 드네요.
절대위치(전체화면)에서 이미지를 자르던가 하는 편법으로 처리하는 건가,
다른 사람들은 이렇게 쓰질 않나 싶기도 하고.
(삭제)
위 링크가 실제 사용하려는 페이지인데요,
다른 브라우저(사파리, 파폭, 크롬, 에피파니)에서는 제가 바라는 결과가 나오는데
익스에서는 배경도 텍스트랑 같이 스크롤되어 버리거든요.
좀 더 방법을 찾아봐야겠어요. (이제 좀 그만하고 싶어요! -_-;)
음? 이상하네요 전잘되는데;;
<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 속성이 작용하면 간단한 일이지만, 전체화면 기준으로 작용하니까 이걸 맞추는 게 좀 주먹구구식 같고 만족할 만한 결과를 얻기가 힘들어서요. 그러니까 특정영역의 왼쪽 상단 첫 번째 픽셀에 배경이미지의 왼쪽 상단 첫 번째 픽셀을 일치시키고 싶어요. 물론, 텍스트는 스크롤되대 배경은 고정이구요.