배경 설정[CSS]

[광고 누르면 오늘의 행운 상승!!]

 

• 배경(background)
  - HTML의 블록 요소에 사각형 형태의 영역
  크기, 배경 색, 이미지 설정 가능
• 배경 색 설정
  - 배경 색 설정 : background-color속성
  
  

단락의 배경 색 회색으로 설정	문서 전체 배경 색 회색으로 설정
p{       background-color:gray; }	body{        background-color:gray;  }

• 배경 이미지
  - 배경 이미지 설정 : backgroun-image 속성 사용
  - 웹 페이지 전체에 지정 이미지(flower.png) 적용 예)

body{
	background-image:url("images/flower.png");
{

• 배경 이미지 반복 설정
  - 배경 이미지 반복 설정 : background-repeat 속성 사용
  - background-repeat : no-repeat; //배경이미지가 반복되지 않게 적용
  - background-repeat : repeat;     //배경이미지가 반복되게 적용
  - background-repeat : repeat-x;  //배경이미지가 반복되지 않게 적용
  - background-repeat : repeat-y;  //배경이미지가 반복되지 않게 적용
  

• 배경 이미지 고정 설정
  - 배경 이미지 고정 설정 : background-attachment 속성 사용
  - background-attachment: fixed; //배경이미지 고정
  - background-attachment: scroll; //배경이미지에 스크롤 적용

• 배경 이미지 위치 설정
  - 배경 이미지 위치 설정 : background-position 속성 사용
  - background-position : 30px, 30px; 배경 이미지 왼쪽 아래로 30px이동

• 배경 이미지 크기 설정
  - 배경 이미지 크기 설정 : background-size 속성 사용
  - background-size: 50%, 50%