목차
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>
결과보기
최신댓글