CSS - background

background style속성도 많이 쓰이는거 같은데
항상 단순한 것만 써서 그런지... background로 효과?를 주려고 하면
왠지 어렵게 느껴지는 부분이다

 

 

 # CSS의 배경 다루기 

background-color	background-image	background-repeat
background-position	background-attachment	background
background-size

 

 1_background-color : HTML 요소의 배경색을 설정

 

 2_background-image : HTML 요소의 배경으로 나타날 배경 이미지를 설정
배경 이미지는 기본 설정으로 반복(바둑판 형식)되어 나타남

선택자 { background-image: url ('배경 이미지 위치'); }

 

 3_background-repeat : 배경 이미지를 수평이나 수직 방향으로 반복하도록 설정

(repeat, repeat-x, repeat-y, no-repeat)

가로축으로 반복	background-repeat: repeat-x;
세로축으로 반복	background-repeat: repeat-y;
반복없음	background-repeat: no-repeat;

 4_background-position : 반복되지 않는 배경 이미지의 상대 위치를 설정
%나 px을 사용하여 상대위치를 직접 설정할 수 있음
상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단

위치값으로 설정 { background-position: 가로위치값 세로위치값; } = background-position: 10% 100px;
left top(기본값)	center top	right top
left center	center	right center
left bottom	center bottom	right bottom

 

 5_background-attachment 

위치가 설정된 배경 이미지를 원하는 위치에 고정실킬 수 있음

고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동하지 않음 (fixed)

<style> body { background-image: url(./rice.png); background-repeat: no-repeat; background-position: right bottom; background-attachment: fixed; }

body의 배경 이미지는 .rice입니다 반복은 하지 않습니다 배경의 위치는 오른쪽 아래로 설정합니다 배경은 화면 위치에서 이동하지 않습니다

 

 6_background : 배경 속성을 한 번에 적용

<style>
	body { background: deepskyblue url(./rice.png) no-repeat right bottom fixed; } 
    // 배경색은 딥블루에 rice를 이미지 배경으로 하고, 반복 없고 오른쪽 아래 고정
</style>

 

 7_background-size : 배경 사이즈 지정

background-size: 300px 150px;