파일 경로는 작은따옴표(’), 큰따옴표(”) 로 붙임. 상대 경로 또는 http:// 시작하는 절대 경로.
요소보다 이미지가 작으면 가로, 세로 반복하여 배경을 채움.
<style>
body {
background-image: url('images/bg1.jpg');
}
</style>
배경 이미지 반복 방법 지정 : background-repeat
배경 이미지를 가로와 세로 중 어느 방향으로 반복할지 지정하거나 한번만 나타나게 함.
종류
설명
repeat
가로, 세로 반복. 기본값.
repeat-x
너비에 가득찰 때까지 가로 반복.
repeat-y
높이 가득찰 때까지 세로 반복.
no-repeat
한번 표시하고 반복 안함.
배경 이미지 위치 조절 : background-position
배경 이미지의 수평 위치 또는 수직 위치 값 지정.
background-position: <수평 위치> <수직 위치>;
수평 위치: left | center | right | <백분율> | <길이의 값>
수직 위치: top | center | bottom | <백분율> | <길이의 값>
/* CSS */
li {
padding-left:50px; /* 왼쪽 패딩 (박스 모델) */
line-height:40px; /* 줄간격 */
/* Do it! 목록 불릿 대신 배경 이미지 사용하기 */
background-image: url('images/book-icon.png');
background-repeat: no-repeat;
background-position: left center;
}
속성 값 2개 지정 시, 첫번째 값은 수평 위치 값, 두번째 값은 수직 위치 값.
속성 값 1개 지정 시, 지정한 값은 수평 위치 값, 수직 위치 값은 center 또는 50% 간주.
배경 이미지 위치 지정 3가지
키워드 : 수평 위치는 left, center, right. 수직 위치는 top, bottom, center.
백분율 : 배경 이미지를 넣을 요소가 있는 해당 위치에서 백분율 계산.
크기 : 배경 이미지 위치를 직접 지정. 배경 이미지의 왼쪽 상단 모서리를 맞춤.
배경 이미지 적용 범위 조절 : background-origin
박스 모델에 패딩이나 테두리가 있다면 배경 이미지를 어디까지 포함해서 할 것인지 정한다.
종류
설명
center-box
박스 모델 내용 부분에만 배경 이미지 표시.
padding-box
박스 모델 패딩까지 배경 이미지 표시. 기본값.
border-box
박스 모델 테두리까지 배경 이미지 표시.
배경 이미지 고정 : background-attachment
배경 이미지가 있는 웹 문서에서 스크롤 할 때, 배경 이미지를 스크롤 하거나 고정한다.
속성 : scroll, fixed
<style>
body {
background-image:url('images/bg2.png'); /* 문서 전체 배경 이미지 */
/* Do it! 문서 전체 배경 이미지 오른쪽 상단에 고정하기 */
background-repeat: no-repeat; /* 배경 이미지 반복 안 함 */
background-position: right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
background-attachment: fixed; /* 배경 이미지 고정 */
}
div {
width:400px;
height:250px;
padding: 20px;
border: 20px solid rgba(204, 204, 204, 0.493);
margin-bottom:20px;
overflow:auto;
background-image:url('images/bg3.png'); /* 텍스트 상자의 배경 이미지 */
background-repeat:no-repeat; /* 배경 이미지 반복 안 함 */
background-position:right top; /* 배경 이미지를 오른쪽 상단에 위치시킴 */
}
/* Do it! #bg1 ~ #bg3 스타일을 사용해 배경 이미지 범위 지정하기 */
#bg1 {
background-origin: padding-box; /* 배경 이미지가 패딩 박스 영역에서 시작됨 */
}
#bg2 {
background-origin: border-box; /* 배경 이미지가 보더 박스 영역에서 시작됨 */
}
#bg3 {
background-origin: content-box; /* 배경 이미지가 콘텐츠 박스 영역에서 시작됨 */
}
</style>
background 속성으로 배경 이미지 제어하기
지금까지의 배경 이미지 속성을 background 속성 하나로 줄여서 사용하기.
body {
background-image: url('images/bg4.jpg');
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
background:url('images/bg4.jpg') no-repeat left top;
속성 값이 달라서 입력 순서는 상관 없음.
배경 이미지 크기 조절 : background-size
배경을 채울 요소 크기 보다 이미지가 크거나 작은 경우, 배경 이미지 크기를 조절함.
화면에 가득 채울 때 유용함.
속성값은 1개라면 너비로 인식, 높이는 원래 이미지의 너비와 높이 비율에 따라 자동 계산.
종류
설명
auto
원래 배경 이미지 크기 만큼 표시. 기본값.
contain
요소 안에 배경 이미지가 들어오도록 함. 이미지 확대 또는 축소가 됨.
cover
배경 이미지로 요소를 모두 덮도록 함. 이미지 확대 또는 축소가 됨.
<크기>
이미지의 너비와 높이 지정. 값이 하나면 너비값 인식. 높이값은 자동 계산.
<백분율>
배경 이미지가 들어갈 요소의 크기 기준으로 백분율로 지정. 지정된 크기에 맞게 이미지 확대 축소.
<style>
#bg1 {
background-size: auto; /* 배경 이미지 원래 크기 */
}
#bg2 {
background-size: 200px; /* 배경 이미지 가로 크기 200px */
}
#bg3 {
background-size: 50%; /* 배경 이미지 가로 크기 50% */
}
#bg4 {
background-size: 100% 100%; /* 배경 이미지 가로 세로 크기 100% */
}
#bg5 {
background-size: contain; /* 배경 이미지가 박스 안에 꽉 차도록 조절 */
}
#bg6 {
background-size: cover; /* 배경 이미지가 박스를 완전히 덮도록 조절 */
}
</style>
그러데이션 효과로 배경 꾸미기
선형 그러데이션
/* 방향 사용해서 만들기 */
.grad {
background: linear-gradient(to bottom right, blue, white);
}
/* 각도를 사용해 만들기 */
.grad {
background: linear-gradient(45deg, #f00, #fff);
}
/* 색상 중지점 지정하기 */
.grad {
background: linear-gradient(to bottom, #06f, white 30%, #06f);
}
원형 그러데이션
/* 타원형 */
.grad1 {
background: red;
background: radial-gradient(white, yellow, red);
}
/* 원형 */
.grad2 {
background: red;
background: radial-gradient(circle, white, yellow, red);
}
/* 가장 가까운 측면 */
#div1{
background:darkgreen;
background:radial-gradient(circle closest-side at 30% 40%, white, yellow, green); /* 그러데이션 중심에서 가장 가까운 측면에 닿을 때까지 */
}
/* 가장 가까운 꼭짓점 */
#div2{
background:darkgreen;
background:radial-gradient(circle closest-corner at 30% 40%, white, yellow, green); /* 그러데이션 중심에서 가장 가까운 꼭짓점에 닿을 때까지 */
}
/* 가장 먼 측면 */
#div3{
background:darkgreen;
background:radial-gradient(circle farthest-side at 30% 40%, white, yellow, green); /* 그러데이션 중심에서 가장 멀리 떨어진 측면에 닿을 때까지 */
}
/* 가장 먼 꼭짓점 */
#div4{
background:darkgreen;
background:radial-gradient(circle farthest-corner at 30% 40%, white, yellow, green); /* 그러데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿을 때까지 */
}
/* 원의 중심에서 20% 위치에서 시작하는 원형 그러데이션 */
.grad {
background: blue; /* 배경색 지정 */
background: radial-gradient(circle at 20% 20%, white, blue);
}
/* 원형 그러데이션 색상 중지점 지정 */
.grad1 {
background: orange;
background: radial-gradient(yellow, white, orange);
}
.grad2 {
background: orange;
background: radial-gradient(yellow 0%, white 10%, orange 60%);
}
