(CSS코딩일기) 배경이미지 넣기, 그라디언트 넣기

오늘은 배경이미지를 넣는 CSS 속성에 대해 알아보겠습니다.

1. 배경이미지 넣기 backgroun-image

1) 배경이미지

배경이미지를 넣는 CSS코드는 background-image 입니다. url(...)이라는 문법으로 배경이미지를 넣습니다.

backgound-image: url('flowers.png')

배경이미지는 여러 개 넣을 수 있습니다. 아래처럼 이미지를 배경으로 넣으면 a.png 아래에 b.png 가 깔리고, 맨 밑에는 c.png 가 깔립니다.

background-image:
url('a.png'), /* 제일 위에 보이는 이미지 */
url('b.png'),
url('c.png');

2) 배경의 위치 background-position

기본값은 left top(왼쪽 위)이고, 가운데 정렬을 하려면 아래처럼 center를 쓰면 됩니다.

background-position: top; /* 위 */
background-position: right; /* 오른쪽 */
background-position: bottom; /* 아래 */
background-position: left; /* 왼쪽 */
background-position: left top; /* 왼쪽 위 (지정하지 않았을 때 기본값) */
background-position: center;

3) 배경의 반복 background-repeat

기본값은 repeat(반복)이고, no-repeat으로 하면 반복되지 않게 할 수 있습니다.

background-repeat: repeat; /* 반복하기 (지정하지 않았을 때 기본값) */
background-repeat: no-repeat; /* 반복 안 함 */

4) 배경의 크기 background-size

직접 가로 세로 크기를 지정할 수도 있고, 비율을 유지하면서 영역에 꽉 차게(cover)하거나, 영역 안에서 최대한 크게 (contain) 할 수도 있습니다.

background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
background-size: contain; /* 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 */
background-size: 40px 30px; /* 가로 40px 세로 30px */

예를 들어, url을 입력하고 아래와 같이 하면 반복하지 않고, 중앙에 위치하며 화면에 가득찬 배경이미지를 넣을 수 있습니다. 

background-image: url('pizza.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;

2. 그라디언트 넣기 linear-gradient

기본적으로 시작 색상과 종료 색상으로 사용할 수 있습니다.

background-image: linear-gradient(#000000, #ffffff);

기본 방향의 각도는 180도인데요. (위에서 아래로 내려오는 방향) 이 각도를 바꾸고 싶다면 맨 앞에다가 각도를 써 주면 됩니다. 각도의 단위는 deg입니다.

background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));

예를 들어, 검정색에서 투명한 검정색으로 넣고 싶다면 아래와 같이 입력하면 됩니다.

background-image:  linear-gradient((rgba(0,0,0,1), rgba(0,0,0,0))

만약, 각도를 바꾸고 싶으면 앞에 각도를 추가해주면 됩니다.

background-image:  linear-gradient(90deg, (rgba(0,0,0,1), rgba(0,0,0,0))

그라디언트 단계를 바꾸고 싶다면 아래와 같이 입력하면 됩니다.

background-image: linear-gradient(90deg, (rgba(0,0,0,1)40%, rgba(0,0,0,0))

그라디언트의 종류는 아주 다양합니다. 구글에 gardient generator이라고 검색하면 다양한 CSS코드를 사용할 수 있습니다. 또한, 이미지 위에 반투명한 그라디언트를 추가하는 방법은 아래와 같습니다.

background-image: 
 linear-gradient(90deg, (rgba(0,0,0,1)40%, rgba(0,0,0,0)),
 url('pizza.png');