스타일 시트를 이용한

배경 지정하기

 

CSS 배경

 

스타일 시트를 이용하면 색상으로 배경을 설정 할 수 있으며 또한 이미지로 배경을 지정 할 수도 있습니다.

이번 시간에는 배경을 지정하는 방법에 대하여 알아보도록 하겠습니다.

 

background-color

설명 : 배경색 지정

속성값 : 색상명 또는 RGB 값

사용예 : <span style="background-color: #d4f4fa">배경색 지정하기</span>

결과 : 배경색 지정하기

 

background-image

설명 : 배경 이미지 지정

속성값 : 배경 이미지의 URL

사용예 : <span style="background-image:url(http://cfile3.uf.tistory.com/image/99B222335A71E96530BD3A);">이미지로 배경 지정하기</span>

결과 : 이미지로 배경 지정하기

※ 예 지정 이미지는 상단 대표이미지 입니다.

 

background-repeat

설명 : 배경 이미지 반복 설정

속성값 : no-repeat, repeat-x, repeat-y, repeat

사용예 : style="background-image:url(주소지정); background-repeat:속성지정"

※ 배경이미지에 대한 반복 설정이기 때문에 배경이미지를 설정하고 해당 설정을 하시면 됩니다.

 

background-attachment

설명 : 배경 이미지 고정 또는 스크롤 설정

속성값 : fixed, scroll, local

 

background-position

설명 : 배경 이미지 위치 설정

속성값 : top, bottom, left, right, center

 

더 다양한 예제는 다음 포스팅 또는 블로그 꾸미기 포스팅 시에 올리도록 하겠습니다. ^^

Posted by JOY [바가지]

댓글을 달아 주세요

  1. 라지영 2018.02.01 17:00 신고  댓글주소  수정/삭제  댓글쓰기

    다음에 모르는 css있으면 바가지님 찬스 써야겠어요 !!
    블로그 꾸미기 포스팅 기대 됩니다 :)



티스토리 툴바