cssPosition.md

Angular - CSS - Positioning

SOURCE

How to use CSS to display this:

<div id="serviceContainer"
     [ngStyle]="{'background': 'url(' + service.imageURL + ')',
           'background-size': 'cover'}">
    <div id="serviceOverlay"></div>
    <img id="serviceIcon" [src]="service.iconURL">
    <h3>{{ service.title }}</h3>
    <div id="servicePriceContainer">
        <h5 id="servicePrice">{{ service.priceHome | currency:'VND' }}</h5>
    </div>
</div>

@import "_extend";

$border-radius: 4px;

#serviceContainer {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  border-radius: $border-radius;
  -webkit-background-size: cover;
  position: relative;

  #serviceOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.3;
    top: 0;
    border-radius: $border-radius;
  }

  #serviceIcon {
    position: absolute;
    max-width: 35px;
    max-height: 35px;
    top: 50%; left: 12%;
    transform: translate(-50%,-50%);
  }

  h3 {
    position: absolute;
    @extend %font-bold;
    color: $color-white;
    font-size: 22px;
    top: 40%; left: 20%;
    padding-right: 100px;
  }

  #servicePriceContainer {
    position: absolute;
    display: table;
    border-radius: $border-radius;
    background: $color-jio-teal-green;
    top: 10%; right: 2%;
    #servicePrice {
      position: relative;
      @extend %font-bold;
      color: $color-white;
      font-size: 12px;
      transform: translateY(30%);
      padding: 1px 10px;
    }
  }
}