CSS 다중 배경
- 이전 페이지 CSS 경계선 이미지
- 다음 페이지 CSS 색상
이 장에서는 요소에 여러 개의 배경 이미지를 추가하는 방법을 배웁니다.
이 외에도 다음 속성을 배웁니다:
background-sizebackground-originbackground-clip
CSS 다중 배경
CSS를 통해 background-image 속성은 요소에 여러 개의 배경 이미지를 추가합니다.
다른 배경 이미지는 쉼표로 구분되며, 이미지는 서로 쌓여 있으며, 첫 번째 이미지가 관찰자에 가장 가깝습니다.
다음 예제는 두 개의 배경 이미지가 있습니다. 첫 번째 이미지는 꽃(하단과 오른쪽에 맞춰져 있음), 두 번째 이미지는 종이 배경(왼쪽 상단에 맞춰져 있음):
실례
#example1 {
background-image: url(flower.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
다중 배경 이미지는 단독 배경 속성(위에서 설명한 것처럼) 또는 background 단축 속성을 사용하여 지정합니다.
다음 예제에서 사용합니다: background 단축 속성(위 예제와 같은 결과):
실례
#example1 {
배경: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
CSS 배경 크기
CSS background-size 속성은 배경 이미지의 크기를 지정할 수 있도록 합니다。
배경 이미지의 크기를 길이, 백분율 또는 다음 두 키워드 중 하나로 지정할 수 있습니다：contain 또는 cover。
아래의 예제는 배경 이미지의 크기를 원래 이미지보다 훨씬 작게 조정합니다(픽셀을 사용하여)：
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
이 코드는 다음과 같습니다：
실례
#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
background-size 의 다른 두 가지 가능한 값은 다음과 같습니다 contain 와 cover。
contain 키워드는 배경 이미지를 최대한 크게 확대하지만(그 너비와 높이가 콘텐츠 영역에 맞아야 합니다), 배경 이미지와 배경 위치 영역의 비율에 따라 배경 이미지가 덮지 않은 배경 영역이 있을 수 있습니다.
cover 키워드는 배경 이미지를 확대하여 콘텐츠 영역이 배경 이미지에 완전히 덮여지도록 합니다(그 너비와 높이가 콘텐츠 영역과 동일하거나 더 큽니다). 이렇게 되면 배경 이미지의 일부는 배경 위치 영역에서 볼 수 없을 수 있습니다.
아래의 예제는 다음을 보여줍니다: contain 와 cover 의 사용법은 다음과 같습니다：
실례
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
여러 배경 이미지의 크기를 정의합니다
다중 배경을 처리할 때,background-size 속성은 여러 배경 크기를 설정하는 값을 받아들이며(콤마로 구분된 목록을 사용합니다).
아래의 예제는 세 개의 배경 이미지를 지정하며 각 이미지에 다른 background-size 값이 지정됩니다：
실례
#example1 {
background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat,;
url(paper.gif) left top repeat;
background-size: 50px, 130px, auto;
}
전체 사이즈 배경 이미지
지금, 웹사이트의 배경 이미지가 항상 전체 브라우저 창을 덮도록 하고 싶습니다.
구체적인 요구 사항은 다음과 같습니다:
- 이미지로 전체 페이지를 채움(백그라운드 공간 없음)
- 필요에 따라 이미지를 조정함
- 화면의 중앙에 이미지를 배치함
- 스크롤 바를 유발하지 않음
아래의 예제는 이를 어떻게 구현할 수 있는지 보여줍니다: <html> 요소(Always at least the height of the browser window)를 사용하여 고정하고 중앙에 배경을 설정합니다. 그런 다음 background-size 속성을 사용하여 크기를 조정합니다:
실례
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
Hero Image
대상 <div>에서 다른 배경 속성을 사용하여 Hero Image(텍스트가 들어 있는 큰 이미지)를 생성하고, 원하는 위치에 배치할 수 있습니다.
실례
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
CSS background-origin 속성
CSS background-origin 속성은 배경 이미지의 위치를 지정합니다.
이 속성은 세 가지 다른 값을 받아냅니다:
- border-box - 배경 이미지는 테두리의 왼쪽 상단에서 시작됨
- padding-box - 배경 이미지는 내쪽 여백의 왼쪽 상단에서 시작됨(기본)
- content-box - 배경 이미지는 내용의 왼쪽 상단에서 시작됨
아래의 예제는 다음을 보여줍니다: background-origin 속성:
실례
#example1 {
border: 10px solid black;
padding: 35px;
background: url(flower.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSS background-clip 속성
CSS background-clip 속성은 배경 그리기 영역을 지정합니다.
이 속성은 세 가지 다른 값을 받아냅니다:
- border-box - 배경이 테두리의 외경에 그려짐(기본)
- padding-box - 배경이 내쪽 여백의 외경에 그려짐
- content-box - 배경이 내용 박스에서 그려짐
아래의 예제는 다음을 보여줍니다: background-clip 속성:
실례
#example1 {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
CSS 고급 배경 속성
| 속성 | 설명 |
|---|---|
| background | 모든 배경 속성을 하나의 선언에서 설정하는 간단한 속성입니다. |
| background-clip | 배경을 그리는 영역을 지정합니다. |
| background-image | 한 요소에 한 장 또는 여러 장의 배경 이미지를 지정합니다. |
| background-origin | 배경 이미지의 배치 위치를 지정합니다. |
| background-size | 배경 이미지의 크기를 지정합니다. |
- 이전 페이지 CSS 경계선 이미지
- 다음 페이지 CSS 색상
