Как увеличить только фоновое изображение

Question

Я борюсь с эффект увеличения только для background image. Этот код масштабирует все элементы «banner» class, но я хочу только сделать бесконечный зум для моего фонового изображения.

index.html.erb

<div class="banner"> 
    <h1>START YOUR JOURNEY</h1> 
    <h1>TO HEALTHY LIFE</h1> 
</div> 

application.css.scss

.banner{ 
     height:100vh; 
     background: url(image-path('swim.jpg')) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     padding-top: 10em; 

     -webkit-animation: zoom 50s; 
     animation: zoom 50s; 

     @keyframes zoom { 
     from { 
       transform: scale(1,1); 
     } 
     to { 
       transform: scale(1.5,1.5); 
     } 
     } 

     h1{ 
     font-size: 5.5em; 
     margin:0; 
     color:$white; 
     padding-bottom: .3em; 
     } 
    }/*banner */ 

jsfiddle код: enter link description here Увеличить эффект не работает на jsfiddle , но я хочу знать, как стиль только фоновое изображение?

Answer 1

использование положение абсолютный способ. Fiddle

.parent { 
    width: 400px; 
    height: 300px; 
    position:relative; 
} 

.child { 
    position:absolute; 
    width: 100%; 
    top:0; 
    left:0; 
    height: 100%; 
    background-color: black; /* fallback color */ 
    background-image: url("https://s22.postimg.org/h6qgvklpd/html5.png"); 
    background-position: center; 
    background-size: cover; 
    transition: all .5s; 
    z-index: -1; 
} 

для справки Article on css-tricks