배경이미지 브라우저에 꽉 채우기
2021. 5. 16. 23:23ㆍCSS
출처 : https://knulab.com/archives/1185
배경이미지 브라우저에 꽉 채우기 – KNULAB
브라우저 뷰포트에 배경이미지가 꽉 차게 보여지려면 아래와 같이 min-height 값을 설정한다. Full Background Cover body, html { margin: 0; padding: 0; height: 100%; } .bgimg { border: 0; padding: 0; background-image: url('ima
knulab.com
브라우저 뷰포트에 배경이미지가 꽉 차게 보여지려면 아래와 같이 min-height 값을 설정한다.
<!DOCTYPE html>
<html>
<title>Full Background Cover</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.bgimg {
border: 0;
padding: 0;
background-image: url('image.jpg');
min-height: 100%;
background-position: center;
background-size: cover;
}
</style>
<body>
<div class="bgimg"></div>
</body>
</html>
첫번째 방법
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}두번째 방법
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}세번째 방법
<img src="images/bg.jpg" id="bg" alt="">#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
네번째 방법
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
'CSS' 카테고리의 다른 글
| 모바일 기기에서 수평(가로) 스크롤 없애기 (0) | 2021.05.18 |
|---|---|
| [공통] inline요소 사이의 없어지지 않는 간격 해결법. (0) | 2021.05.17 |
| Css 폰트 바꾸기, Font-Face를 적용하기 (0) | 2021.05.16 |
| [CSS] OL 리스트 두번째 줄 정렬 맞추기 (0) | 2021.05.07 |
| hr 태그 초기화 (0) | 2021.05.06 |