Image-background in CSS

Ionic Framework ionic-v3
1

Hello,

I’m trying to display a background-image in my Ionic app and I’ve tried all the paths that I could imagine but that doesn’t work… I found some topics on this subject but these were unefficient…
I have my picture in:

src/assets/pictures/header.png

And I put the CSS class in:

src/app/app.scss

Finally my class is:

.headerBackground {
background-image: url(‘…/assets/pictures/header.png’);
width: 100%;
height: 20%;
background-size: contain;
background-repeat: no-repeat;
}

For the path, I tried:

/assets/pictures/header.png
assets/pictures/header.png
…/assets/pictures/header.png
/pictures/header.png
…/pictures/header.png

And many many other solutions but it stil doesn’t work!

Can you help me to figure out how to solve this problem? It makes me crazy!!

Thanks in advance :slight_smile:

2

Your url seems to be correct. Make sure you are applying this syle to correct element which should be <ion-content>.
Try giving background color and check if the changes reflect!

PS: There could be one more reason: src folder content might not have been copied to www folder so make sure you run ionic cordova build and not only cordova build

3

Thank you for your reply, but I do not want to display the image to the whole ion-content but just to a div in my ion-content. This is the result I want to have on my phone (it works in the emulator):

Capture_img-bakground
Capture_img-bakground.PNG344×633 27.6 KB

As you can see, ion-content already have a background-color!
Is ion-content the only element where I can apply image-background?

For your PS: I ran ionic cordova build android and I’m quite sure the folder has been copied because it display an element and the source image is in the same folder as these background-images!

4

No, I thought you wanted background image for complete page. My bad!

5

OK no problem, so nobody’s got the same problem?? :frowning:
I’m deseperate… I’ve tried everything…

6

Displaying images in an ion-card has been working really well for me.

7

Very good idea, thank you :slight_smile: