CSS #9 속성 -배경

1. background

요소의 배경을 설정(단축)

값	의미	기본값
background-color	배경색상	transparent
background-image	하나 이상의 배경 이미지	none
background-repeat	배경 이미지의 반복	repeat
background-position	배경 이미지의 위치	0 0
background-attachment	배경 이미지의 스크롤 여부(특성)	scroll

💡사용법
background: 색상 이미지경로 반복 위치 스크롤특성;

.box1{
background: red url("../img/image.jpg) no-repeat left top scroll;
}/*색상 이미지경로 반복 위치 스크롤특성*/
.box2{
background:url(../img/image,jpg)no-repeat right 100px;
}/*이미지경로 반복 위치*/
.box3{
background: red;
}/*색상*/

특정값을 사용하지 않아도 괜찮다.

---

2. background-color

요소의 배경 색상을 지정(개별)

값	의미	기본값
색상	요소의 배경 색상
transprent	투명	transparent

'요소는 기본적으로 배경은 투명하다.'라는 속성이 있다.

background-color이 기본이지만 원래 사용하던 것 처럼 bacground:red;같은 식으로 해도 된다.

---

3. background-image

요소의 배경에 하나 이상의 이미지를 삽입(개별)

요소의 배경에 이미지를 삽입한다.

값	의미	기본값
none	이미지 없음	none
url(경로:인자 또는 인수라고도 한다.)	이미지 경로(url)

💡사용법
background-image:url('경로')

.box{
background-image:url("../img/image.jpg")
width:120px;
height:80px;
}

배경이미지 삽입 시, 요소의 크기가 설정되어야 배경이미지가 보일 수 있습니다.

background-image는 하나 이상의 배경 이미지를 삽입할 수 있다.,로 구분한다.
먼저 작성된 이미지가 더 위에 쌓인다. 이런'다중 배경 이미지'는 IE8이하 버전에서 사용할 수 없다.

여기서 만약 사이즈를 크게 늘릴 경우 해당 이미지가 반복되어서 표현된 것을 볼 수 있으며, 이를 제어하기 위해 아래서 background-repeat을 배우자

---

4. background-repeat

배경 이미지의 반복을 설정(개별)

값	의미	기본값
repeat	배경 이미지를 수직, 수평으로 반복	repeat
repeat-x	배경 이미지를 수평으로 반복
repeat-y	배경 이미지를 수직으로 반복
no-repeat	반복 없음

💡적용예시

<div class="box"></div>

.box{
width:550px;
height:350px;
border: 2px dashed lightgray;
background-image:url("이미지를 넣기 위한 주소")
background-size: 100px; 
background-repeat: no-repeat;
}

위와 같이 설정하거나 repeat-x와 repeat-y를 설정함으로써 수평으나 수직으로 반복되는 것을 설정할 수 있다.

---

5. background-position

배경 이미지의 위치를 설정(개별)

<div class="box"></div>

.box{
width:550px;
height:350px;
border: 2px dashed lightgray;
background-image:url("이미지를 넣기 위한 주소")
background-size: 100px; 
background-repeat: no-repeat;
background-position: right top; /*이 개념이 위와 다르게 추가*/
}

값	의미	기본값
%	왼쪽 상단 모서리는 0% 0%, 오른쪽 하단 모서리는 100% 100%	0%(x축의미) 0%(Y축의미)
방향	방향을 입력하여 위치 설정top,bottom,left,right,center
단위	px,em,cm등 단위로 지정

💡사용법

background-position: 방향1 방향2; /*값이 방향일 경우*/
background-position: x축, Y축; /*값이 단위(%,px등)일 경우*/

값이 방향일 경우 방향1과 방향2는 서로 순서를 바꿔쓸 수 있지만,
값이 단위일 경우 x축과 y축의 순서를 바꿔쓸 수 없다.

위의 예제에서 살펴보자면

.box{
width:550px;
height:350px;
border: 2px dashed lightgray;
background-image:url("이미지를 넣기 위한 주소")
background-size: 100px; 
background-repeat: no-repeat;
background-position: right top; /*이 개념이 위와 다르게 추가*/
}

또한 방향과 단위를 같이 쓸 수도 있지만 단위를쓰고 그 다음에 방향을 써야 한다.

---

6. background-attachment

요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성)설정(개별)

값	의미	기본값
scroll	배경 이미지가 요소를 따라서 같이 스크롤 됨	scroll
fixed	배경 이미지나 뷰포트에 고정되어, 요소와 같이 스크롤되지 않음.
local	요소 내 스크롤 시 배경 이미지가 같이 스크롤됨

예제)

<div class="box"></div>

body{
height:3000px;/*스크롤 생성을 위해서*/
}
.box{
width:500px;
height:350px;
background-image:url("이미지 해당 주소 기입");
border: 2px dashed lightgray;
background-attachment: scroll;
}

1. scroll을 사용하면 이미지가 스크롤을 따라서 움직인다.
2. fixed를 이용하게 되면 배경이미지는 뷰포트에 고정된 상태로 스크롤을 해도 요소만 움직이게 된다.

---

7. background-size

배경 이미지의 크기를 지정

값	의미	기본값
auto	배경 이미지가 원래의 크기로 표시됨	auto
단위	-px,em,%등 단위로 지정 -width height형태로 입력 가능(e.g. 120px 370px)-width만 입력하면 비율에 맞게 지정됨(e.g. 120px
cover	배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐 \ 이미지가 잘릴 수 있음
contain	배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐 \ -이미지가 잘리지 않음

1. cover의 경우 컨테이너에 꽉차게 설정된다.(컨테이너의 긴 길이에 맞춰진다)
2. contain의 경우 컨테이너에 컨테이너에 딱 맞게 설정된다(컨테이너의 짧은 길이에 맞춰진다)
3. 만약 가로와 세로 사이즈를 맞추고 사이즈가 이상하게 된다면 세로를 설정하는 것보다 가로를 맞추면 컨테이너에 맞게 값이 설정된다.

마지막으로

이번에는 background속성에 대해서 배워봤는데요, 다음에는 전환과 변환에 대해서 배워보도록 해요.