그라디언트가있는 배경은 반응이있는 이미지를 포함합니다.

Question

저는 이온 3 앱을 제작 중이며 그라디언트에서 이미지를 더 반응 좋게 만들고 싶습니다. 현재 iphone 5와 함께 사용하면 모양이 좋아 보이지만 다른 장치로 변경하면 멋지지 않습니다.

html 파일

<ion-content> 
<div class="bg"> 
    <ion-icon name="list"></ion-icon> 
    <ion-grid> 
     <ion-row> 
      <ion-col text-center> 
       <h1>2<sup>nd</sup></h1> 
       <p>Current Position</p> 
      </ion-col> 

      <ion-col text-center> 
       <img src="assets/fcb.png" alt=""> 
      </ion-col> 

      <ion-col text-center> 
       <img src="assets/lag.png" alt="" width="50px"> 
       <p>lagiga</p> 
      </ion-col> 
     </ion-row> 

     <ion-row> 
      <ion-col text-center> 
       <h1>FC Barcelona</h1> 
      </ion-col> 
     </ion-row> 


    </ion-grid> 
</div> 

CSS 파일

page-home { 
.bg { 
    height: 100%; 
    width: 100%; 
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 1.48%, rgba(3, 62, 119, 0.68) 12.52%, rgb(210, 17, 83) 89.52%), url('../assets/bg.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 
ion-icon { 
    color: #fff; 
    font-size: 3.2em; 
    margin-left: 15px; 
} 
ion-grid ion-row ion-col { 
    color: #fff; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
    h1 { 
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
     font-size: 2.6em; 
     font-weight: lighter; 
    } 
} 
.player { 
    height: 70%; 
} 
.name { 
    position: absolute; 
    h1 { 
     color: rgb(210, 17, 83); 
    } 
} 

}

아이폰 5 아이폰 6 - 당신은에서 볼 수 있듯이 내가 원하는대로되지 외모 빨간색 영역,

아이 패드

Answer 1

.bg { 
    height: 100%; 
    width: 100%; 
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 1.48%, rgba(3, 62, 119, 0.68) 12.52%, rgb(210, 17, 83) 89.52%), url('../assets/bg.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
} 

봅니다이 background-size: cover;