꼭좀 봐주세요 bg 처리때문에 그렇거든요 > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

꼭좀 봐주세요 bg 처리때문에 그렇거든요 정보

꼭좀 봐주세요 bg 처리때문에 그렇거든요

본문

그림에 보시면 화살표 있는 부분에 bg 처리한거를여

보시면 참 잘하셨던데요 저는 저렇게 안되는데 어떤 방법으로

한건지 알고 싶습니다.

출처 홈페이지

http://funnymom.net/
  • 복사

댓글 전체

화면 드래그 해보시면 아시겠지만
background 속성으로 넣은건 아니구요
테이블 사방을 저 선이 포함된 이미지들이 막고 있네요
bg처리는 아닙니다 ^^

bgcolor 이나 background는 드래그 했을때 파랗게 드래그가 되지 않아요
배경은 css의 가장 큰 장점중에 하나입니다. 방법은 여러가지  있습니다.

위처럼 고정된 너비 x 높이 일 경우 방법은 아래처럼 해 보세요
------------------------------------------------------------

1) 우선 사용하시는 그래픽 프로그램에서 (photoshop 혹 gimp등) 위처럼 이미지를 만드세요
2) 전체를 원하는 너비 x 높이 로 자른다음 이미지를 저장하세요
3) 다음, css 에서 이 배경이미지를 적용하세요.
3-1) 아래처럼 할 수 있습니다.아래에서 center top는 정렬을 위쪽 중앙에 하라는 의미이며, no-repeat는 배경색을 반복하지 말라는 뜻 입니다.

{background-image:url('images/bgboard.jpg') center top no-repeat }



너비는 고정되고 높이는 가변적일 경우는 아래처럼 하면 됩니다.
--------------------------------------------------------------

1) 우선 사용하시는 그래픽 프로그램에서 (photoshop 혹 gimp등) 위처럼 이미지를 만드세요
2) 다음에 3가지 방법이 있습니다.  디자인에 따라서 최적의것을 선택하세요. 모든 경우는 2-1) 이 무난합니다.

2-1) 상단, 중간, 하단 3가지로 이미지를 나누어 각 각 따로 저장합니다
2-2) 상단 및 하단 2가지로 이미지 제작
2-3) 이미지를 하나로 제작

3) 다음, css 에서 이 배경이미지를 적용하세요.
3-1  css에서는 위쪽에 (제목등이 있는곳) bg 를 하나 적용하고
3-2  중간부분에 똑 적용합니다. 이것은 위 아래로 내용에 따라 늘거나 줄어듭니다
3-3) 마지막 부분에 bg 이미지를 적용합니다.

머리통 부분은 아래처럼 해 주고
{background-image:url('images/bg-board-north.jpg') center top no-repeat }

다만, 중간 몸뚱아리 부분은 y 축으로 내용에 따라 늘어나야 하니까, 이처럼 해 주면 됩니다. {background-image:url('images/bg-board-body.jpg') center top repeat-y}

마지막으로 아랫도리는 아래처럼 해 주면 됩니다
{background-image:url('images/bg-board-south.jpg') center top no-repeat }


위의 절차는 마치  게시판의 "머리통" "몸뚱아리" "아랫도리" 와 같은 이치입니다.

참고로,  http://funnymom.net/ 에서는 이미지를 각각 만들어서 넣었네요 - 즉, 수작업으로 하였다는 의미입니다.
© SIRSOFT
현재 페이지 제일 처음으로