묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
상단 로고 들어가는 부분에 배경이미지를 넣구 싶어요!
2007.12.31 16:51
안녕하세요
아래 상단 로고부분에 배경색 바꾸는거에 대해 질문 드렷는데 이창훈785님의 친절한 답변으로
해답을 얻었습니다.
그런데 욕심이 나서 색상만 바꾸는게 아니구 배경이미지를 넣어 보구 싶어서 질문드립니다.
한번에 여줘봐야 되는데 초보라 하나씩 해가면서 배우는 중이라 게시판 지저분하게 해서 죄송합니다.
#header { position:relative; width:978px; height:150px; border-top:6px solid #754c24; border-left:1px solid #b9b9b9; border-right:1px solid #b9b9b9; background:#cb853e url(../images/white/bgHeader1.png) no-repeat right bottom ; margin-bottom:10px; z-index:99;}
#header h1 { position:absolute; top:20px; left:25px;}
아래 상단 로고부분에 배경색 바꾸는거에 대해 질문 드렷는데 이창훈785님의 친절한 답변으로
해답을 얻었습니다.
그런데 욕심이 나서 색상만 바꾸는게 아니구 배경이미지를 넣어 보구 싶어서 질문드립니다.
한번에 여줘봐야 되는데 초보라 하나씩 해가면서 배우는 중이라 게시판 지저분하게 해서 죄송합니다.
#header { position:relative; width:978px; height:150px; border-top:6px solid #754c24; border-left:1px solid #b9b9b9; border-right:1px solid #b9b9b9; background:#cb853e url(../images/white/bgHeader1.png) no-repeat right bottom ; margin-bottom:10px; z-index:99;}
#header h1 { position:absolute; top:20px; left:25px;}
댓글 7
-
Guns
2007.12.31 17:10
-
굿모링
2007.12.31 17:21
답변 감사드립니다.
#header { position:relative; width:978px; height:150px; border-top:6px solid #754c24; border-left:1px solid #b9b9b9; border-right:1px solid #b9b9b9; background:#cb853e url(../images/white/bgHeader1.png) no-repeat right bottom ; margin-bottom:10px; z-index:99;}
#header h1 { position:absolute; top:20px; left:25px;background:url(../images/white/logobg.png) no-repeat left top;}
아무런 변화가 없네요...ㅠㅠ -
이창훈785
2007.12.31 17:24
음... 아까 이부분에 대해서 제가 설명을 해드리겠습니다.
background: #000000 url(../images/white/bgHeader.png) no-repeat right bottom
여기서 bgheader.png라는 파일이 상단 전체 배경 이미지입니다. 매뉴부분 까지 포함해서여. 그러니깐.아까 가로 980? 세로 114 맞죠? 이영역에 대한 배경이미지르 뜻합니다. 그런데 png이미지 파일을 보시면 알듯이 세로높이는 한 40정도밖에 안될것입니다.
이것을 위 소스 보시면 no-repeat right bottom 뒤에 이게 붙죠? 이뜻은 노 리피트: 배경 반복않함. 라이트:오른쪽위치 바텀: 밑에 위치
이렇게 되어서 메뉴 뒤에 있는 배경 이미지가 위 이미지가 되는 것입니다. 그 외의 부분엔 백그라운드 색깔로 보여주는것이지요.
그러니.. 만약 상단 전체에 배경을 넣고 싶으시다면 상단 영역의 크기의 이미지를 만들고, 메뉴자리에 들어올 이 이미지를 그 이미지에 썩어서 하단에 자리잡게 만든 다음 하나의 큰 이미지로 만들어 주시면 메뉴뒤에 이미지도 나오게 되고 상단에 이미지도 나오게 될것입니다.
참고로 배경이미지 확장자가 굳히 png가 아니어도 되네요. gif면 좋구여. 큰 이미지인데 256이상 칼라이미지이면 jpg로 저장하면 파일용량을 줄일수 있구여, 256이하 칼라이미지이면 gif로 저장하시면 작은 용량ㅇ의 이미지를 가질수 있습니다.^^
참고로 헤더h1의 백그라운드는 로고 이미지 공간입니다. 그래서 로고 이미지가 가로막아서 배경이 안보이는 것일듯 합니다. 그부분에 넣으시면 로고이미지 공간밖에 활용을 못하게 되네요. -
Guns
2007.12.31 17:28
아 하나 빠졋네요. 이미지의 크기가 width: 111px; height: 222px; 라면
#header h1 { position:absolute; top:20px; left:25px; background:url(이미지경로) no-repeat left top; width:111px; height:222px;} -
굿모링
2007.12.31 17:46
이창훈785님 다시 한번 감사드립니다.
너무 쉽게 써주서 이해가 확실히 됩니다. 그런데 제가 재대로 이해하구 있는건가 함 봐주세요
저는 상단 배경이미지 하나 따로,메뉴이미지 하나 따로 이렇게 2개의 이미지를 만들어서 따로 따로 접목시킬려구 했는데,
이창훈님 말씀은 아래메뉴가 들어갈 부분을 같이 한이미지로 만들어서 아까 가르쳐 주신 방법 대로 넣으라는 말씀 이신거져.
대신에 리피트되지 않을 만큼의 크기로요.
제가 제대로 이해하구 있는건가요..? -
이창훈785
2007.12.31 17:55
넹.. 님이 생각하시는게 맞네요..
흰부분 이미지 따로 메뉴뒤배경 이미지 따로 만들려면 좀더 복잡해져서여..
메뉴쪽 div에 가로크기 지정해주고 높이 지정해주고 메뉴 좌측 정렬 지정해주고 하는 번거로움이 있으니 처음 접할때 무척 헷깔려 할꺼 같아서 차라리 위쪽과 메뉴쪽 배경 이미지를 한데 묶어서 넣으면 좋다는 얘기였네요.
넣으실때는 이미지경로 다음에 no-repeat left top 으로 해주시고여. 만약 그림이 상단 영역에 꽉차 있는거라면 굳히 no-repeat left top 는 넣어줄 필요가 없어요. 반복되봤자. 안보이기 때문이죠. -
굿모링
2007.12.31 18:02
소중한 시간 내주셔서 고맙습니다.
홈페이지 예쁘게 만들어 볼게요...
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
젊은기관사 | 게시판에서 동영상만 정렬이 안됩니다. [5] | 2007.12.31 by 젊은기관사 |
데이빗박 | 방명록에서 댓글 등록시 비밀글이 안되네요. | |
굿모링 | 상단 로고부분의 배경색을 바꾸고 싶어요? [9] | 2007.12.31 by 이창훈785 |
♥열혈후니 | 페이지의 종류를 구분하는 방법이 뭐가있을 까요? [1] | 2007.12.31 by Guns |
굿모링 | 상단 로고 들어가는 부분에 배경이미지를 넣구 싶어요! [7] | 2007.12.31 by 굿모링 |
덕진이 | RSS 생성 관련질문임니다 [1] | 2020.03.14 by 덕진이 |
qa | 페이지에 폼메일 넣기 어떻게 하나요.(고수님들) [1] | 2007.12.31 by 반디영맨 |
서리~ | Admin 으로 로그인해도 첨부파일 다운로드 불가 [1] | 2007.12.31 by 백성찬 |
질문 | 태그와 달력이 동작을 안합니다. [2] | 2007.12.31 by 속사람 |
속사람 | 인기 태그 위젯에 링크 url 주소 문의 [2] | 2007.12.31 by 속사람 |
이지매직 | 외부페이지에서 사이즈 조절하기나 특정부분만 추출하는 방법은? [2] | 2007.12.31 by 이지매직 |
Frot | Sinpic map [4] | 2007.12.31 by Frot |
부우우 | 최근 글 텍스트 색깔 [2] | 2007.12.31 by 지나가다 |
이지매직 | 서명란에 각 회원이 구글애드센스와 같은 광고를 달 수 있게 하는 방법... | |
바둥이 | 외부로그인 질문입니다. [8] | 2008.01.01 by 바둥이 |
나홀로이야 | 이미지가 안떠여. 제발좀 알려주세요. [1] | 2008.01.01 by 백성찬 |
홍이만세^^ | [질문] 회원메뉴 글씨가 깨져요... [2] | 2008.01.01 by 홍이만세^^ |
오준근 | <재질문>갤러리에서 썸네일크기를 원본크기(100%)로 보여주고 싶습니다. | |
사과맛푸딩 | 1차 매뉴부분 질문. | |
이지매직 | 간단한 프로필을 드러내는 방법은.. |
#header h1 {............}이부분은 원래 로고가 있던 자리 같군요.
여기다가..
_____________________________________________________________________________
#header h1 { position:absolute; top:20px; left:25px; background:url(이미지경로) no-repeat left top;}
_____________________________________________________________________________
blue : modify
red: insert