Ionic background image - device problem


#1

Hi guys, i’ve searched for entire forum but haven’t got the right solution for my problem.

I am trying to place background image on my app, things I saw while I was searching confused my additionally.

background: url(’/img/background.jpg’) no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

that’s my scss for one page and it is working on browser, the problem is real device
in which folder should I put my background image and what path should i write in my scss?

Thanks in advance guys.


#2

put into

src/assets folder

try this in your scss file

background-image: url('../assets/img/background.jpg');

#3

thanks a lot man
its working this way
the only problem I have now is that I am having one white line in the center of image, I am guessing it’s maybe cause of some image property (like this “no-repeat center”) that i can’t put now because it won’t show image
what’s the thing with this line? any idea? :slight_smile:


#4

can you see the white line at both browser and device?

I dont think its cause by the no-repeat center as i’m also using it like this

#login-content {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../assets/img/img-bg.png');
}

maybe you have other elements aside from the html tag for the background.

try to comment all the elements and just leave the one for the background,check it on your chrome inspector.


#5

it’s actually showing only at device, browser background works fine :o

i tried that code you are using but it’s showing same thin white line(on the center of the map, thats the weirdest part) on every page i am using it.