센터 크기 조정시 이미지 CSS 정렬

Question

창 크기를 조정할 때 내 이미지의 중앙 부분을 항상 표시하고 싶습니다. 왼쪽과 오른쪽에서 이미지가 사라지고 이미지의 중앙 부분이 똑같이 보이기를 원합니다.

<section id="home-slider" class="flexslider fullbg" 
    style="background-image:url(img/slide/home/1_1_c.jpg); height:600px; padding:0px;"> 
<ul class="slides"> 
    <li class="home-slide"> 
     <div class="flex-caption transparent light-font center"> 
      <p class="home-slide-content bounceInLeft animated" data-wow-delay="0.5s" data-wow-duration="4s"> 
       Scape. <span class="highlight">Scope.</span> Style.<span class="highlight"> Context.</span> 
      </p> 

      <p class="home-slide-content bounceIn animated" data-wow-delay="2s" data-wow-duration="4s"> 
       We <span class="highlight">build</span> it 
      </p> 
     </div> 
    </li> 
    <li class="home-slide"> 
     <div class="flex-caption transparent light-font center"> 
      <p class="home-slide-content swing animated" data-wow-delay="2s" data-wow-duration="4s"> 
       Western Red <span class="highlight">Cedar Wood Cladding</span> 
      </p> 

      <p class="home-slide-content fadeInUp animated" data-wow-delay="2s" data-wow-duration="4s" 
       style="font-size:80px;"> 
       <span class="highlight">Full</span> Electrics Package 
      </p> 
     </div> 
    </li> 
    <li class="home-slide"> 
     <div class="flex-caption transparent light-font center"> 
      <p class="home-slide-content flipInY animated"> 
       <span class="highlight">Fully</span> Insulated 
      </p> 

      <p class="home-slide-content slideInLeft animated"> 
       With a <span class="highlight">50 year guarantee </span>rubber roof 
      </p> 
     </div> 
    </li> 
</ul> 
</section> 

CSS :

#home-slider { 
height:100%; 
} 
.home-slide-content { 
font-family:'BebasNeueRegular',sans-serif; 
font-size:90px; 
text-transform:uppercase; 
position:relative; 
margin-bottom:0px; 
text-align:center; 
line-height:1; 
} 
.home-slide-content { 
padding:0; 
color:#ffffff; 
} 
/* FlexSlider Necessary Styles */ .flexslider { 
overflow:hidden; 
margin:0; 
padding:0; 
} 
.flexslider .slides>li { 
display:none; 
/*-webkit-backface-visibility: hidden;*/ 
} 
/* Hide the slides before the JS is loaded. Avoids image jumping */ 
.flexslider .slides img { 
width:100%; 
display:block; 
} 
.fullbg { 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
} 

Answer 1

jsBin demo

.fullbg { 
    background: none 50%/cover; 
} 

P.S : 누락 된 center center (또는 shortha을 여기

내가 가진 무엇 ND 50%) 배경 위치

.fullbg { 배경 사이즈 : 커버; }