背景画像を拡大する方法

Question

私はと闘っています。ズーム効果のみ背景画像です。このコードは"banner"クラスのすべての要素をズームしますが、私はバックグラウンド画像を無限に拡大したいだけです。

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