Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

Dev Blog

배경이미지 브라우저에 꽉 채우기 본문

Web Development/General Tech Knowledges

배경이미지 브라우저에 꽉 채우기

Nomad Kim 2021. 5. 21. 12:17

출처: 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%;
}

 

 

 

'Web Development > General Tech Knowledges' 카테고리의 다른 글

SPA - CSR/SSR/SSG  (0) 2021.08.01
DOM/CSSOM/BOM/Virtual DOM  (0) 2021.07.31
How to improve an E-Commerce Checkout Experience: UI/UX Case study  (0) 2021.05.11
How to use Real-time DB of Firebase  (0) 2021.04.20
React Convenient Tools - Prettier, ESLint, Snippet  (0) 2021.04.19
'Web Development/General Tech Knowledges' Related Articles more
Comments