'내 페이지에 예쁜 배경 이미지를 깔아야지'라는 생각과 함께 body에 background-image를 주었다.
그런데.... 뭔가 이상하다.
사진이 배경을 꽉 채우질 않고, 여러 개가 반복되어 나오는 게 아닌가? 사진이 너무 작나 싶어 다른 것으로 바꾸니 이번에는 화면 밖으로 애매하게 잘려나간다.
어떻게 고쳐야 될까? background-image 관련 속성들을 살펴보며 조금씩 고쳐나가자.
background
웹 페이지에 이미지를 넣을 때는 img 태그를 사용하는 방법과 css의 background 속성을 사용하는 방법 두 가지를 주로 사용한다.
그중에서도 background 속성은 컨텐츠를 꾸미기 위한 용도로 주로 쓰여 요소의 background, 배경을 넣어줄 수 있다.
background 관련 세부 속성에는 아래와 같은 것들이 있다.
- background-image
URL을 이용해 이미지 주소에서 이미지를 불러온다.- background-color
요소의 배경색을 지정해준다.- ✅ background-repeat
배경 이미지의 반복을 지정해준다.- ✅ background-size
배경 이미지의 크기를 지정해준다.- ✅ background-position
배경 이미지의 위치를 지정해준다.- ✅ background-attachment
배경 이미지를 고정시킬 수 있다.
background-image와 background-color는 많이 사용해봐서 익숙하니 패스.
마지막 네 개 속성을 파헤쳐보겠다.
background-repeat
반복되는 배경부터 하나로 바꿔보자.
예쁜 그림이지만, 나는 여백의 미를 가지면서 화면을 꽉 채우고 싶지 한 화면에서 여러 번 보고싶은 것은 아니었다. 왜 배경에 이미지를 넣으면 반복되는 걸까?
그 이유는 background-repeat을 설정하지 않으면 기본 값이 repeat으로 설정되기 때문이다.
1. repeat
- repeat
background-repeat: repeat;상태에서는 이미지가 화면에 들어가고 남는 가로-세로 여백을, 같은 이미지를 여러 번 출력하는 형식으로 채운다.
repeatX, repeatY를 사용하면 repeat와 같은 형식으로 반복되되, X축 혹은 Y축으로만 반복하게 만들 수도 있다.
속성에 repeat 값을 주었을 때는 화면의 가로 너비가 이미지의 가로 너비의 배수로 딱 맞아 떨어지지 않으면 위의 그림과 같이 잘려나간다. 세로도 마찬가지.
반면, space 속성을 사용하면 그림이 잘리지 않는다.
2. space
space
background-repeat: space;상태에서는 배경이 들어갈 만큼 채우고, 나머지 여백은 공백 상태로 남는다.
출처: MDN, background-repeat
예시에서 보다시피 사진은 상하좌우 잘리는 곳 없이 들어가 반복된다. 하지만 예외일 때가 있는데, 이미지의 기본 크기가 뷰포트의 크기보다 큰 경우에는 잘려 보일 수 있다.
3. round
- round
background-repeat: round;상태에서는, space처럼 배경이 들어갈 만큼 반복해 채우지만 여백 공간만큼 사진을 늘려 공백을 없앤다.
round를 사용하면 확실히 남는 공간을 채울 수 있지만, 삽입한 이미지가 찌그러진다는 단점이 있다.
4. no-repeat
- no-repeat
background-repeat: no-repeat;상태에서는 배경 이미지가 반복되지 않는다.
이미지가 반복되는 디자인을 특별히 사용하지 않는 경우에는, 웬만해서는 no-repeat을 사용하게 된다. 가장 빈번하게 사용되고, 여백의 미를 지킨 채 배경 이미지를 줄 수 있는 방법이다.
나는 배경 이미지를 반복하고 싶지 않으니, body에 background-repeat: no-repeat; 속성을 부여했다.
좋아! 이제 배경이 반복되지 않는다.😋
맺으며
배경 반복은 지웠지만, 남은 화면을 꽉 채우게 만드려면 어떻게 할까?
다음 포스팅에서는 배경 이미지의 사이즈를 변경하는, background-size 속성에 대해 알아보자.
다음 포스팅 ─
깔끔하고 센스있는 배경이미지: #2 background-size
