목차
- background-size 예제 - 배경 이미지 크기
- background-size 정의
- background-size 구문
- background-size 예제 - 속성값 적용 효과
background-size 예제 - 배경 이미지 크기
auto / 300px 100px
<style>
#hz1 {
border: 2px solid black;
padding: 25px;
background: url('https://picsum.photos/600/600/?random');
background-repeat: no-repeat;
background-size: auto;
}
#hz2 {
border: 2px solid black;
padding: 25px;
background: url('https://picsum.photos/600/600/?random');
background-repeat: no-repeat;
background-size: 300px 100px;
}
</style>
<h2>background-size: auto (default):</h2>
<div id="hz1">
<h2>홈짱닷컴</h2>
<p>Homzzang.com</p>
</div>
<h2>background-size: 300px 100px:</h2>
<div id="hz2">
<h2>홈짱닷컴</h2>
<p>Homzzang.com</p>
</div>
결과보기
background-size 정의
배경이미지 크기 지정.
1.
- 기본값 : auto
- 상속여부 : X
- 애니효과 : O
- CSS버전: CSS3
- JS구문 : object.style.backgroundSize="60px 120px"
2.
IE9 이상 주요 최신브라우저 모두 지원.
3. MDN background-size 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
background-size 구문
background-size: auto|length|cover|contain|initial|inherit;
[속성값]
auto
기본값. 배경이미지 원래 크기.
length
배경이미지의 너비・높이 설정.
- 첫 번째 값: 너비 , 두 번째 값: 높이
- 하나의 값만 적으면 두 번째 값은 "auto"로 설정.
- 길이 단위는 px, cm 등 사용 가능.
% (백분율)
배경이미지의 너비・높이를 부모 요소의 백분율로 설정.
- 첫 번째 값: 너비, 두 번째 값: 높이
- 하나의 값만 제공하면 두 번째 값은 "auto"로 설정.
cover
이미지 늘이거나 가장자리 중 하나를 조금 잘라내도 컨테이너 전체 덮게끔 배경이미지 크기 조정.
contain
이미지가 완전히 보이도록 배경이미지 크기 조정.
initial
이 속성의 기본값으로 설정.
inherit
이 요소를 부모 요소에서 상속.
background-size 예제 - 속성값 적용 효과
[100 % 100% / 75% 75%]
<style>
#hz1 {
border: 2px solid black;
padding: 25px;
background: url('https://picsum.photos/600/600/?random');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#hz2 {
border: 2px solid black;
padding: 25px;
background: url('https://picsum.photos/600/600/?random');
background-repeat: no-repeat;
background-size: 75% 75%;
}
</style>
<h2>background-size: auto (default):</h2>
<div id="hz1">
<h2>홈짱닷컴</h2>
<p>Homzzang.com</p>
</div>
<h2>background-size: 300px 100px:</h2>
<div id="hz2">
<h2>홈짱닷컴</h2>
<p>Homzzang.com</p>
</div>
결과보기
[cover / contain]
<style>
#hz1 {
border: 2px solid black;
padding: 25px;
background: url('https://picsum.photos/600/600/?random');
background-repeat: no-repeat;
background-size: cover;
}
#hz2 {
border: 2px solid black;
padding: 25px;
background: url('https://picsum.photos/600/600/?random');
background-repeat: no-repeat;
background-size: contain;
}
</style>
<h2>background-size: auto (default):</h2>
<div id="hz1">
<h2>홈짱닷컴</h2>
<p>Homzzang.com</p>
</div>
<h2>background-size: 300px 100px:</h2>
<div id="hz2">
<h2>홈짱닷컴</h2>
<p>Homzzang.com</p>
</div>
결과보기
[contain,cover : 배경이미지 중첩 (※ 첫 번째는 contain 지정, 두 번째는 cover 지정)]
<style>
#hz {
border: 2px solid black;
padding: 25px;
background: url('https://picsum.photos/600/600/?random'), url('https://source.unsplash.com/random');
background-repeat: no-repeat;
background-size: contain, cover;
}
</style>
<div id="hz">
<h2>홈짱닷컴</h2>
<p>Homzzang.com</p>
</div>
결과보기
[반응형 배경이미지]
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.hz-image {
background-image: url("https://picsum.photos/600/600/?random");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hz-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
<div class="hz-image">
<div class="hz-text">
<h1 style="font-size:2rem">홈짱닷컴</h1>
<h3>Homzzang.com</h3>
<button>바로가기</button>
</div>
</div>
<p>코딩언어 강의 : HTML CSS JS JQEURY PHP SQL</p>
<p>빌더서버 강의 : 그누보드・아미나・영카트 강의</p>
결과보기
