Size of the image inside the ion-header

Issue

I’m putting a background-image on my ion-header, but the image seems to be zooming

In the first image it is as it is and in the second as I would like it to be

.background-header {
    background: url(../img/bg_header_menu.png) !important;
    background-size: cover;
}

I tried background-size: cover, 100% and a few more things but did not succeed

Thanks

EDIT with html:

<ion-header-bar class"background-header">
</ion-header-bar>

Sorry for the poor explanation, what happens is that the first image seems to be zooming. This way the strokes do not look the same in the second image.

And the image size is 1366×177, it’s not a repeat image

Solution

well. using

background: url(../img/bg_header_menu.png) !important; will make all the default background-properties to be important ( image, position, repeat, attachment etc ) so the next thing you wrote , background-size:cover, is null because of that previous important

you should use background-image:url(../img/bg_header_menu.png) instead of background

see snippet example below :

.background-header {
    background-image: url(http://placehold.it/1366x177) ;
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center center;
    width:100%;
    height:177px;
    float:left;

}

<ion-header-bar class"background-header">

</ion-header-bar>

OR you can use

 background:{url(http://placehold.it/1366x177) no-repeat scroll center center /cover transparent  }

if you want to use all the background properties in one style

Answered By – Mihai T