CODEWITHSUNDEEP
cssionic-frameworkresponsive-design
Manspof
Manspof

Reputation: 357

background with gradient include image responsive

I'm build ionic 3 app and I wanna make the image in gradient more responsive. for now, when i use it with iphone 5 it looks good but when I change to other devices it not looks great.

html file

<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 file

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);
    }
}

}

iphone 5 enter image description here iphone 6 - not looks as I want as you can see in the red area enter image description here

ipad enter image description here

Upvotes: 1

Views: 813

Answers (1)

kyun
kyun

Reputation: 10264

.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;
}

Try to add this background-size: cover;

Upvotes: 1

Related Questions