"height : 100 %;"를 사용하지 않고 전체 브라우저 창을 커버하는 배경 이미지 CSS

Question

전체 브라우저 화면을 커버하기 위해 CSS에서 배경 이미지를 만들 수 있지만 크기가 작을수록 이미지의 크기가 커지면 이미지가 더 길어지는 방법이 있습니까?

CSS를 높이 100 %로 설정하면 모바일 반응이 없지만 높이를 100 % 설정하지 않으면 브라우저 화면 전체가 표시되지 않습니다.

CSS

.about{ 
    background: url("city.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Answer 1

예, 하나는 몸에 배경 이미지 ...

body{ 
 
    background: url(http://lorempizza.com/500/500) no-repeat center center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<section id="about" class = "about"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
      <br><br> 
 
      <h1>My Journey</h1> 
 
       <div class="col-lg-6"> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-body"> 
 
         <p>Having been a dilligent, hard working student in Malahide Community School, I only had one thing I really wanted to study in college - business! When I didn't get the grades for my first choice of business and economics in Trinity, I turned to my second choice - Computer Science and Business. Having gone through a recent name change from Business and Computing, I thought how hard could it really be? </p> 
 
         </div> 
 
        </div> 
 
        
 

 
        <div class="panel panel-default"> 
 
         <div class="panel-body"> 
 
         <p>So, final year came and went.. Some fun, a bit of stress and a fantastic way to end a great four years. What made the experience even better, was achieving a fantastic final grade, which made the time spent worth it! </p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-lg-6"> 
 
        <br><br><br><br><br><br> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-body"> 
 
         <p>When I got to college, I had a tough time getting my head around most of the programming modules that were part of the course. It was like nothing I'd ever seen before. A far cry from the spread sheets I thought I'd be filling in. Having reached the end of the year, exam time arrived and I ended up failing two programming modules - bye bye summer! But I got through the repeats, and funnily enough, ended up learning a lot about myself, and more importantly: programming! </p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
     </div> 
 
     </div> 
 
    </section>

또는 section 커버 전신을 설정하여

html, body { 
 
    margin: 0; 
 
} 
 

 
.about{ 
 
    min-width: 100vw; 
 
    min-height: 100vh; 
 
    background: url(http://lorempizza.com/500/500) no-repeat center center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}

<section id="about" class = "about"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
      <br><br> 
 
      <h1>My Journey</h1> 
 
       <div class="col-lg-6"> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-body"> 
 
         <p>Having been a dilligent, hard working student in Malahide Community School, I only had one thing I really wanted to study in college - business! When I didn't get the grades for my first choice of business and economics in Trinity, I turned to my second choice - Computer Science and Business. Having gone through a recent name change from Business and Computing, I thought how hard could it really be? </p> 
 
         </div> 
 
        </div> 
 
        
 

 
        <div class="panel panel-default"> 
 
         <div class="panel-body"> 
 
         <p>So, final year came and went.. Some fun, a bit of stress and a fantastic way to end a great four years. What made the experience even better, was achieving a fantastic final grade, which made the time spent worth it! </p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-lg-6"> 
 
        <br><br><br><br><br><br> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-body"> 
 
         <p>When I got to college, I had a tough time getting my head around most of the programming modules that were part of the course. It was like nothing I'd ever seen before. A far cry from the spread sheets I thought I'd be filling in. Having reached the end of the year, exam time arrived and I ended up failing two programming modules - bye bye summer! But I got through the repeats, and funnily enough, ended up learning a lot about myself, and more importantly: programming! </p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
     </div> 
 
     </div> 
 
    </section>

Answer 2

제거는 '고정'-이 당신을 위해 무엇을 찾고있는 생각합니다.