CODEWITHSUNDEEP
cssangularangular-material
rock11
rock11

Reputation: 758

Add background image to mat card

I have mat card that consists of multiple mat cards.I want to give a background image to my parent mat-card and position is such that all the child mat cards are in the center of the image.I tried using css. The image is centralized when I'm on a basic laptop screen,however when I move to a bigger screen the position changes.I want the look to be same on both screens.Please help.Thanks in advance.

Here is my mat-card css:

.card {
    width: 100%;
    margin: 2em;
    height: 100%;
    background-image: url("/../assets/img/test.png");
    background-size: cover;
    background-position-y: -20vh;
}

Here is my stackblitz:https://stackblitz.com/edit/angular-stwmuu I want a background image that runs behind those mat cards.

Upvotes: 3

Views: 8379

Answers (1)

Tšeliso Molukanele
Tšeliso Molukanele

Reputation: 1660

I fixed by adding the background image to the element containing the card then making the cards background colour transparent.

in my case the element was a mat-grid-tile and with inlined style it looks like so

<mat-grid-tile style="background-image: url('/../assets/image.jpeg');">
    <mat-card style="background-color: rgba(51, 170, 51, .1)">
        <mat-card-title>Iris</mat-card-title>
        <mat-card-content>Lencwadi futhi ibonisa ukuhlelwa kwenhlangano yoFakazi ngaphansi kweNdikimba Ebusayo, kuhlanganise namabandla anezindikimba zabadala, iKomiti Eyengamele [yeGatsha] yamalungu ayisikhombisa yakulelozwe, kanye nababonisi besifunda nabesigodi.</mat-card-content>
    </mat-card>
</mat-grid-tile>

Upvotes: 2

Related Questions