I have a css isuule please help me

Ionic Framework ionic-v3
1

i want to create a home screen like this:
Capture11

I did that
Capture22

is not look like this above one

i did not get any solution. actually i’m new in css
here my .html

   <ion-col width-50 align-items-start class="home-bg" >
          <div class="abc">
            <div dark><b>Balance Enquiry</b></div>
          </div>
        </ion-col>

.css

page-category {
.home-bg {
  border: solid green 2px;
  color: #333;
  margin: 0 6px;
  padding: 15px 15px 15px 15px;
  min-height: 116px;
  border-radius:00px 12px 00px 12px;
-moz-border-radius:00px 12px 00px 12px;
-webkit-border-radius:00px 12px 00px 12px;
.abc{

	background: url(/assets/imgs/enquiry.png) no-repeat;
	
	width:100%;
	height:100%;
	padding-right:50%;
	
}
}

Please tell me anyone how can i do that.

2

try inspecting your page and play around with values in your browser.

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
https://developer.chrome.com/devtools

3

Below code put in your scss
.abc{

 background: url(/assets/imgs/enquiry.png) no-repeat;
 
 width:100%;
 height:64px;
 padding-right:50%;
 margin-bottom:8px;
 background-position: center; 

 
}
1 Like
4

also you can try those options

for the picture:

 background-position: center;

see https://www.w3schools.com/cssref/css3_pr_background.asp

for the text:

text-align: center;
1 Like
5

Thank you its wok for me.

6

Thanks dear this is also work for me and work fine.