박스 모델에서 padding과 content 영역은 요소의 배경을 나타내는 영역
-> 배경으로 이미지나 색상 지정 가능
background-color 속성
background-color:<색상 값>;div{
width : 100px;
height : 100px;
background-color:red;
}background-image 속성
background-image:url("이미지 경로");div{
width:160px;
height:120px;
background-image:url('images/coffee.jpg');
}위 코드 실행 시 div 요소에 이미지가 삽입된 상태로 표시
사용시 주의 점
-
요소의 배경 크기가 반드시 있어야 함
background-image 속성은 요소의 배경에 이미지를 삽입하는 원리기에, 요소 배경의 너비와 높이를 지정하지 않으면 이미지가 보이지 않음(width, height) -
이미지의 크기가 요소의 배경 크기와 맞지 않으면 짤려서 보임
-> 요소의 배경이 삽입하려는 이미지보다 크면 이미지가 여러게 들어감
background-repeat 속성
위 그림처럼 요소의 배경 크기가 삽입하려는 이미지보다 크면 이미지를 자동으로 반복해서 설정
-> 이러한 설정을 바꾸기 위해 background-repeat 속성 사용
background-repeat: 속성값;| 속성 값 | 설명 |
|---|---|
| no-repeat | 이미지를 반복하지 않음 |
| repeat-x | 이미지를 가로 방향으로 반복 |
| repeat-y | 이미지를 세로 방향으로 반복 |
| repeat | 이미지를 가로와 세로 방향으로 반복 |
| round | 이미지를 반복하되 이미지 요소에 딱 맞도록 크기 자동 조절 |
| space | 이미지가 잘리지 않도록 반복 |
div{
width:320px;
height:120px;
background-image:url('images/coffee.jpg');
background-repeat : no-repeat;
border: 1px solid black;
}background-size 속성
요소의 배경 크기가 이미지보다 크면 background-repeat 으로 해결 가능
-> 이미지가 더 클때 잘리는 문제는 해결 불가
-> 하지만 background-size 속성으로 이미지 크기를 지정해서는 처리 가능
background-size:auto or cover or contain <너비,높이>;| 속성 값 | 설명 |
|---|---|
| auto | 이미지크기를 유지 |
| cover | 이미지의 가로 세로 비율을 유지하면서 크기를 확대하거나 축소해 요소의 배경으로 채움 |
| contain | 이미지의 가로 세율 비율 유지, 이미지가 배경 요소 안에 들어가도록 크기 확대,축소 |
| 너비,높이 | 이미지 크기를 직접 지정 |
cover의 경우 이미지 일부가 잘릴 수 있음
contain의 경우 비율을 유지하면서 이미지가 배경 요소에 꽉차도록 확대하지만, 배경의 가로 세로 중 한 부분이 꽉 차면 그 상태에서 멈춘 후, 못 채운 부분엔 이미지 반복
div{
width:80px;
height:60px;
background-image:url('google.png');
background-size: 80px 60px;
}
background-position 속성
background-position : x위치, y위치| 위치 | 속성 값 | 설명 |
|---|---|---|
| x | left,center, right | x축 방향의 위치 지정 |
| y | top.center,bottom | y축 방향의 위치 지정 |
| 공통 | px,rem,em,% | 위치를 직접 지정 |
background-position 속성은 1개 사용 or 2개 사용 가능
-> 1개 사용시 지정한 값은 x축 값이 되고, y축 값은 기본으로 center
-> 2개 사용 시 x,y 축으로 지정
div{
width:320px;
height:240px;
border:1px solid black;
background-image:url('google.png');
background-repeat:no-repeat;
background-size: 160px, 120px; // 배경 크기의 절반으로 이미지 크기 지정
background-position : 100%;
}
값을 한개만 지정하였기에 y축은 center
x축은 가장 큰값인 100%를 지정하였기에 가장 오른쪽에 위치
background-attachment 속성
요소에 삽입된 이미지를 스크롤 할때, 이미지의 작동 방식 결정
background-attachment:속성 값;| 속성 값 | 설명 |
|---|---|
| local | 삽입된 이미지 요소와 웹 브라우저에서 모두 스크롤 됨 |
| scroll | 삽입된 이미지 요소에서는 고정되지만, 웹 브라우저에서는 스크롤 됨 |
| fixed | 삽입된 이미지 요소와 웹 브라우저에서 모두 고정됨 |
<style>
body{
height:1000px;
}
.parent{
width : 320px;
height : 240px;
border : 1px solid black;
overflow : scroll;
background-size : 160px, 120px;
}
.children{
height:2000px;
background-image:url('google.png');
background-attachment : scroll;
}
</style>
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>class 속성값이 children인 div 태그에서 이미지 삽입
삽입된 이미지가 스크롤되도록 body 태그 요소와 children 클래스를 가진 div 태그의 요소를 이미지가 삽입된 parent 클래스를 가진 div 태그 요소보다 크게 정의
scroll
local의 경우 위와 같지만 요소와 웹 브라우저를 모두 스크롤 할 경우 이미지도 같이 스크롤 됨
fixed의 경우 스크롤해도 이미지가 고정되어 있음
background 속성으로 한번에 지정하기
앞선 배경 속성은 background 속성으로 한번에 지정 간으
-> background-size 속성만은 / 로 구분해 주어야 함
background: <color 속성 값> <image 속성 값> <repeat 속성값> <position 속성값 / size 속성 값> <attackment 속성값>;ex)
div{
background-color:red;
background-image:url('google.png')
background-repeat:no-repeat;
background-position:center;
background-size : 100% 100%;
background-attachment : fixed;
}div{
background: red url('google.png') no-repeat center / 100% 100% fixed;
}보통은 속성을 하나씩 지정해서 사용하길 권장
