op card image

src/app/components/opCommercial/op-commercial/op-commercial.component.html

@@ -19,17 +19,18 @@
       <div class="list-group">
         <div class="card mainCard" *ngFor="let op of opCommData | async">
           <div class="row">
-            <div class="col-md-6 card card-image mb-3 subCard1" style="background-image: url({{op.carteTemplate.downloadURL}});">
+            <div class="col-md-6 card-image mb-1 subCard1" [ngStyle]="{ 'background-image': 'url(' + op.carteTemplate.downloadURL + ')'}">
+              <div class="view mask-light pattern-1">
               <div class="row firstRow">
                 <div class="col-md-6 flex-center card-block cardPart1">{{commercant.commercialName}}</div>
-                <div class="col-md-6 flex-center card-block cardPart2">
-                  <img src="{{commercant.image.downloadURL}}" class="img-fluid" alt="Responsive image">
-                  test2
+                <div class="col-md-6 flex-center card-block card-image mb-1 cardPart2" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">
+                  <p>test2</p>
                 </div>
               </div>
               <div class="row secondRow">
-                <div class="col-md-6 flex-center cardPart3">{{op.name}}</div>
-                <div class="col-md-6 flex-center cardPart4">{{op.uid}}</div>
+                <div class="col-md-6 flex-center cardPart3"><p>{{op.name}}</p></div>
+                <div class="col-md-6 flex-center cardPart4"><p>{{op.uid}}</p></div>
+              </div>
               </div>
             </div>
             <div class="col-md-6 card subCard2">
@@ -39,4 +40,5 @@
         </div>
       </div>
 
+
 </div>

src/app/components/opCommercial/op-commercial/op-commercial.component.scss

@@ -3,8 +3,17 @@
   width: 100%;
 }
 
+.view {
+  height:102%;
+  width: 103%;
+}
+
+
 .subCard1 {
   height: 15rem;
+  background-repeat: no-repeat;
+  background-size:20% auto;
+  background-position : center;
 }
 
 .firstRow {
@@ -22,8 +31,12 @@
 
 .cardPart2 {
   //background-color: orange;
+  background-repeat: no-repeat;
+  background-size:50% auto;
+  background-position : center;
 }
 
+
 .cardPart3 {
   //background-color: green;
 }