[CSS기초]background속성

 

background속성은 배경에 관련된 스타일과 속성을 설정할 수 있다.

주로 사용되는 속성에 대해서 정리를 해 보았다.

 

1️⃣background-image

요소에 배경 이미지를 지정한다. 이미지 파일 경로나 url을 사용하여 배경 이미지를 지정할 수 있다.

 

⚠️background-image 속성 주의사항

url()을 사용하여 이미지를 배경으로 사용하는 경우 웹 접근성에 영향을 미칠 수 있다.

배경 이미지는 스크린 리더기 등의 기술에 읽히지 않기 때문에 배경 이미지 외에 img태그를 추가해

사이즈를 1px로 줄여 숨기는 방식을 사용할 수 있다. 

 

2️⃣background-size

이미지의 사이즈를 조절한다. 값으로 %,px이 올 수 있지만, 보통 cover나 contain속성을 사용한다.

원본 이미지

이런 원본이미지가 있다면 속성별로 적용되는 이미지는 다음과 같다.

왼쪽 : cover 오른쪽 : contain

cover : 컨테이너 크기에 맞춰 이미지가 채워진다.

contain : 컨테이너에 이미지 전체가 나오도록 만든다.

 

 

3️⃣background-repeat

이미지가 반복되는것을 막아준다.

background-size: 200px로 정의하면 컨테이너에 이미지가 가득 채워진다.

이때 background-repeat : no-repeat; 로 설정하면 반복되지 않는다.

no-repeat;

 

4️⃣background-position

background-size가 cover일 때, 이미지가 잘리는 부분을 조정하기 위해 사용하는 속성이다.

첫 번째 값은 x축 두 번째 값은 y축을 지정한다.값은 px과 %가 온다. 값에 따라 동작이 다르기 때문에 주의해야한다.

왼쪽 : 20px 20px     오른쪽 0% 20%

px은 20px씩 왼쪽과 위쪽 영역이 떨어져있다.

%는 초과되는 부분이 얼마나 되는지를 정의한다.

그래서 이렇게 위로 20%가 초과되도록 설정을 해 준 것이다. 

이런 수동 속성을 사용하지 않고 background-position : center 로 정의해 준다면 이미지가 가운데에 맞춰질 수 있도록 해준다.

 

5️⃣background

축약형 표현이다.

background: #f00 url('image.jpg') no-repeat center/cover; 

1.background-color

2.background-image

3.background-repeat

4.background-position

5.background-size

위의 순서로 들어온다. position과size속성은 /로 구분해서 작성한다.

*attachment,origin,clip속성은 제외함

 

+두 배경 레이이어를 지정하는 방법

콤마(,)를 사용해서 다중 배경을 지정할 수 있다.

  background: linear-gradient(to top, rgba(31, 31, 11, 0.8) 10%, transparent),
    		url("background.jpg") no-repeat center/cover;

 

 

왼쪽 : 일반    오른쪽 : 다중 배경

이렇게 다중 배경을 설정해서 어두운 효과를 만들 수 있다.