[CSS] background, background-image, backgroun-color

[블로그 꾸미기] 꼭 알아야할 필수 CSS 첫번째 - border, margin, padding에 이은 CSS 두 번째입니다. background의 속성인 background-color, background-image, background-position, background-repeat, background-attachment에 대해 알아보겠습니다.

background는 이름 그대로 요소의 배경 속성을 지정하는 겁니다. 색, 배경 그림, 배경 그림의 위치, 배경 그림을 반복할 건지 를 설정할 수 있습니다.

background-color: 제일 많이 사용하는 건 역시 색을 지정하는 background-color죠. 색을 지정하는 방법은 red, blue처럼 직접 색의 이름을 적는 방법, rgb(빨간색, 녹색, 파란색)으로 정하는 방법, #ff0000처럼 16진수를 이용하는 방법이 있습니다.

backgorund-color:yellow
backgournd-color:rgb(255, 255, 0)
backgorund-color:#ffff00

[블로그 꾸미기] 꼭 알아야할 필수 CSS 첫번째 - border, margin, padding에서 잠깐 이야기한 것처럼 background-color로 배경색을 지정하면 padding도 배경색으로 나타납니다.

 

backgorund-image는 배경 그림을 넣을 때 사용합니다. 아래처럼 씁니다.

background-image:url(이미지 주소)

 

backround-position : 배경 그림을 표시할 때, 그림의 위치를 정할 수 있습니다. 왼쪽 위 모서리를 기준으로 해서 상하좌우의 위치를 지정해주면 정해진 곳에 그림이 표시됩니다. 그림의 위치는 픽셀이나 %를 단위로하는 숫자를 이용할 수도 있고요. left/center/right - top/center/bottom을 이용해서 지정할 수도 있습니다. 기본적으로 왼쪽 위 모서리를 기준으로 하기 때문에 left top 또는 20px 30px 처럼 가로 속성하나 세로 속성 하나가 짝을 이룹니다.

background-position: left top
background-position: 20px 50px
background-position: 20% 50%

블로그 로딩 속도를 빠르게 - CSS Image Sprites을 이용해서 만든 이미지도 이 background-position을 이용해서 넣어야 정확한 위치에 보고 싶은 부분만 표시할 수 있습니다.

 

background-repeat: 배경 그림을 반복할 것인지 한 번만 표시할 것인지 지정하는 겁니다. 배경 그림의 크기가 작으면 화면 전체에 표시될 수 있도록 반복할 수 있습니다.

background-repeat: repeat ; 가로, 세로 모두 반복
background-repeat: repeat-x ; 가로로만 반복
background-repeat: repeat-y ; 세로로만 반복
background-repeat: no-repeat ; 반복 안 함. 한 번만 표시

 

background-attachment : 배경 그림을 고정할 것인지 스크롤을 따라서 이동하게 할 것인지를 지정합니다. 예를 들어 김태희 사진을 배경으로 정했다고 한다면, 글 내용이 길어져서 마우스로 스크롤 바를 내릴 때, background-attachment가 fixed로 지정되어 있다면 글 뒤에는 김태희의 얼굴이 화면의 같은 자리에 고정되어 있게 됩니다. scroll로 되어 있으면 페이지를 스크롤 할 때 김태희 사진도 함께 스크롤 됩니다. 이때는 화면이 아닌 문서에 고정된다고 보는 게 맞겠죠.

background-attachment: fixed ; 화면에 고정, 스크롤 되지 않음.
background-attachment: scroll ; 문서에 고정, 함께 스크롤

간단히 줄여서 쓰기

위 모든 속성을 한 번에 쓸 수 있습니다.

background: 배경색 url(그림주소) 반복 고정 가로위치 세로위치의 순서입니다. 각 항목은 공백(빈칸)으로 나눠서 구분하고, 필요 없으면 생략할 수 있으며 순서에 맞게 써야 합니다. 아래는 굿네이버스의 이미지를 배경으로하는 상자의 css 코드입니다. fixed로 되어 있어서 스크롤을 내려도 배경 그림은 항상 같은 위치에 표시됩니다.

background-color:#ffff00;
background-image:url(http://cfs.tistory.com/custom/blog/10/108480/skin/images/public_gnb.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:400px 100px;

background:#ff0 url(http://cfs.tistory.com/custom/blog/10/108480/skin/images/public_gnb.jpg) no-repeat fixed 400px 100px;
 
 
 
 
 
 
 

background 속성 중에서는 color를 지정하는 것 정도만 알아도 블로그에서 글상자 만드는 데 엄청난 도움이 됩니다. 글상자 뿐아니라 문단의 색을 지정하거나 또는 중요한 구문을 강조하고 싶을 때 배경색을 이용할 수도 있지요. 그림을 넣는 것까지 할 줄 안다면 댓글 입력창에 "댓글 쓰고 가세요." 같은 이미지를 넣을 수을 수도 있습니다. 활용하기 나름이니까 꼭 알아두세요.

관련글

blockquote를 이용해서 인용구문 배경 꾸미기
필수 CSS - border, margin, padding
블로그 로딩 속도를 빠르게 - CSS Image Sprites
댓글 입력창에 배경 그림 넣기