Div inside card

Ionic Framework ionic-v3
1

How to make a div having background image & the width of div should be equal to card width
please help …!!

2

Is this what you want?

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <ion-card>
        <div class="card-image"></div>
        <ion-card-header>
          Card with div and background-image
        </ion-card-header>
        <ion-card-content>
          This is the card content.
        </ion-card-content>
      </ion-card>

      <ion-card>
        <img src="https://loremflickr.com/600/200" />
        <ion-card-header>
          Card with image
        </ion-card-header>
        <ion-card-content>
          This is the card content.
        </ion-card-content>
      </ion-card>
    </ion-content>
  `,
  styles: [`
    .card-image {
      background-image: url("https://loremflickr.com/599/200");
      width: 100%;
      height: 200px;
      background-size: no-repeat;
    }
  `]
})
export class HomePage {

  constructor(public navCtrl: NavController) {
  }
}
1 Like
4

Thanks it worked for me with little bit changing :slight_smile:
because i have little diff style of card
like on the top i have some text | title next i have image next i have again text with transparent color

5

You could use something like this:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <ion-card class="my-card-image">
        <ion-card-header class="my-card-header" color="light">
          Card with div and background-image
        </ion-card-header>
        <ion-card-content class="my-card-content" color="light">
          This is the card content.
        </ion-card-content>
      </ion-card>
    </ion-content>
  `,
  styles: [`
    .my-card-image {
      background-image: url("https://loremflickr.com/599/200");
      width: 100%;
      height: 200px;
      background-size: no-repeat;
    }
    .my-card-header {
      background-color: rgba(0,255,255,0.3);
    }
    .my-card-content {
      background-color: rgba(255,255,0, 0.3);
      height: 100%;
    }
  `]
})
export class HomePage {

  constructor(public navCtrl: NavController) {
  }
}
1 Like
6

Thanks :slight_smile: this s what i was looking for :slight_smile:
Thank you soo much