목차
- background-image 정의
- background-image 구문 ★
- background-image 예제 - 상속 X, 단 영향은 미침
- background-image 예제 - 자식요소 margin 부분은 포함 X
- background-image 예제 - 자식요소 margin 부분도 포함 O
- background-image 예제 - 배경이미지 무한 슬라이드
- background-image 예제 - 이미지주소를 base64 코드 사용하기
background-image 정의
요소에 하나 이상의 배경이미지 설정.
1.
배경이미지는 요소 왼쪽상단모서리에 배치되며 수직/수평 반복.
ps.
2.
요소 배경은 padding /border 포함 요소의 전체 크기임. (margin은 제외)
부모요소에 테두리 안 주면 자식요소 부분에만 배경이미지 생김.
3.
배경이미지 비작동 대비해 항상 background-color 속성도 설정 권장.
4.
- 기본값 : none
- 상속여부 : X
- 애니효과 : X
- CSS버전 :CSS1 + CSS3에서 새로운 속성값 추가.
- JS구문 : object.style.backgroundImage="url(img_girl.gif)"
5.
스프라이트 이미지 (
Sprite Image : 여러 이미지를 한 이미지 파일에 모아놓은 통파일 된 배경이미지) 사용해 이미지 요청 개수 줄이면
로딩 속도 개선됨.
(예)
6.
7. 예제 더 보기
background-image 구문 ★
selector {background-image: url('URL주소')|none|initial|inherit;}
[속성값]
url ( 'URL주소')
이미지 URL 주소.
- 둘 이상의 이미지 지정하려면 URL을 쉼표( , )로 구분. (예) background-image: url('/1.png'), url('/2.png'), url('/3.png');
- 절대주소/상대주소 개념 이해하기
- base64 코드로 변환된 주소 사용 가능. (목차 12번 참고) <img> 태거의 src 속성값 부분을 URL 주소 부분에 넣으면 됨.
none
배경이미지 사용 안 함. (기본값)
linear-gradient()
선형 그레이디언트를 배경이미지로 설정.
- 최소 두 가지 이상의 색상 정의 (위에서 아래로)
radial-gradient()
방사형 그레이디언트를 배경이미지로 설정.
- 최소 두 가지 색상 정의 (중심에서 변방으로)
repeating-linear-gradient()
선형 그레이디언트 반복
repeating-radial-gradient ()
방사형 그레이디언트 반복.
initial
이 속성의 기본값으로 설정.
inherit
부모 요소의 속성값 상속.
PS. 여러 속성값 동시 사용 가능. (※ 첫 번째 것이 맨위에 옴.)
예제
background-image: linear-gradient(to bottom,rgba(17,17,17,0.5) 10%, rgba(17,17,17,0.85) 30%), url('이미지주소');
background-image 예제 - 상속 X, 단 영향은 미침
부모요소에서 배경이미지 지정하면, 그 효과가 자식요소인 h1에도 미침.
다만,
명백한 상속 표시 위해, 자식요소에 background-image: inherit; 표기.
<style>
div {
width:400px;
height:60px;
background-image: url("http://i.imgur.com/MzHQIAK.jpg"); border:1px solid brown;
}
h1 {
margin:10 10 10 10px;
color:white;
background-image: inherit;
}
</style>
<div>
<h1>홈짱닷컴 (homzzang.com)</h1>
background-image 예제 - 자식요소 margin 부분은 포함 X
※ 부모요소 div에 border 값을 안 주면 자식요소 margin 포함 X.
<div>
<h1>홈짱닷컴 (homzzang.com)</h1>
</div>
background-image 예제 - 자식요소 margin 부분도 포함 O
※ 부모요소에 border 줘서 자식요소 margin에도 배경이미지 주기.
<style>
border: 1px solid red;
}
h1 {
background-image: inherit;
}
</style>
<div>
<h1>홈짱닷컴 (homzzang.com)</h1>
</div>
PS. 부모요소에 border 줘도 자식요소에 배경이미지 설정 시, margin 포함 X.
<style>
div { border: 1px solid red; }
h1 { background-image: url("http://i.imgur.com/MzHQIAK.jpg"); }
</style>
<div>
<h1>홈짱닷컴 (homzzang.com)</h1>
</div>
background-image 예제 - 배경이미지 무한 슬라이드
<style>
body {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
align-items: center;
flex-wrap: wrap;
width: 100vw;
height: 100vh;
}
.infinite-photo-grid {
width: 100%;
height: 100%;
max-height: 750px;
background-image: url(https://raw.githubusercontent.com/s1mpson/-/master/codepen/infinite-photo-grid/photo-grid.jpg);
background-size: calc(4.84 * min(100vh, 750px)) min(100vh, 750px);
background-repeat: repeat-x;
animation: scroll 50s linear infinite;
}
@keyframes scroll{
from {
background-position: left calc(4.84 * min(100vh, 750px)) top 0px;
}
to {
background-position: left 0px top 0px;
}
}
</style>
<main class="infinite-photo-grid"></main>
결과보기
background-image 예제 - 이미지주소를 base64 코드 사용하기
- background-image: url('data:image/png;base64,PNG_IMG_BASE64_CODE');
- background-image: url('data:image/jpeg;base64,JPEG_IMG_BASE64_CODE');
- background-image: url('data:image/gif;base64,GIF_IMG_BASE64_CODE');
PS. 자세한 내용은 <img> 태그 목차 12번 내용 참고.
