Background Image for page on IONIC

Ionic Framework ionic-v3
1

I,m trying to render a background image for a page .in IONIC@BETA.25

my Html  code

<ion-content  class="myview"   padding class="letsstart">

</ion-content>

my scss

.myview {
 
    
    background-image: url('../../img/letsstart.jpg');

// background-image: url(’/img/letsstart.jpg’);
// background-image: url(‘img/letsstart.jpg’);
// background-image: url(’…/img/letsstart.jpg’);
// background-image: url(’./img/letsstart.jpg’);

}

I have tried above approcahes.
where am i missing ??

2 Likes
2

Hi,

You can try the following in your CSS where PAGENAME is the name of the html file for your page (e.g.PAGENAME.html):

ion-page.PAGENAME{
    background-image: url('../../img/letsstart.jpg');
}

ion-page.PAGENAME > ion-content{
  background-color: transparent;
}

The last bit is overriding ionic’s default ion-content background color setting of white.

I’m not sure if you are using a Navbar/Toolbar but it’s at least a start. By looking at the Elements and Styles windows in Chrome Developer you can see the generated CSS from ionic and usually work out what you need to do.

3

Try this:

  1. Create APP/www/img folder, along the build folder
  2. Copy your image to APP/www/img/letsstart.jpg
  3. Change CSS to background-image: url(’…/…/img/letsstart.jpg’);

You need to reference the image using a relative path (relative path from the css file after build) and you can only reference the files in the APP/www folder.

Hope it helped!

4

Followed the same… Still not working.

7

Hi, try this:

<ion-content padding [ngStyle]="{'background-image': 'url('../../img/letsstart.jpg')'}">

</ion-content>
2 Likes
8

Finally… Worked…

HTML

<ion-content   padding class="getstart">
    </ion-content>

to Provide Background for page. in External Cascading style.

SCSS (Dont forget to Import page in app.core.Scss in theme folder)

.getstart {

background-image: url('../../img/inner_bg.png');
// background: url('../../img/getstart.png');
background-repeat: no-repeat;
background-size:cover;
## Heading}

To render image for IMG tag in INLINE style…

<img id="bgrimage" src="/img/getstart.png" alt="imagenotavailable">

Thanks All.

5 Likes
9

I removed the first “…/” and ended up with.

.myview{
     background-image: url('../img/smoky-mountains-bg.png');
     background-repeat: no-repeat;
     background-size: cover;
}

It works with the CLI commands

 ionic serve
 ionic emulate android
3 Likes
10

Hi Thanks for your link by saying It worked …

We are trying with background image for that we are using .scss but its loading only on --lab environment (browser ) … but now i want display it on android design could you help me out which path i should specify and where i need to put the resource in the device .

currently in url path url(…/…/img/bg2.jpeg) i am specifying

11

Having the same annoying issue. I am overriding the ion-content in the varibles.scss and everything works fine in ionic serve. When ionic run android i get a blank (default white) background. I have tried everything I could find here on the boards and other forums, yet nothing works. Attempted this with two different android devices (galaxy 3s and 4), and both produce the same negative results.

I am using other images through out the app and they work fine on the device. The path is relative to the index.html, background-image: url('assets/img/background.png'); just like all the other images that work.

ionic info:

ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.45
OS: Windows 7
Node Version: v6.9.1

Does anyone have any other suggestions?

Thanks

12

Problem solved. Nothing wrong with the path, or any of my code. Global background image goes into app.scss, not variables.scss.

Robb

13

The background image is not searched in /assets folder. When transpiled, it is looked into the /www/build folder. So if you have your background image on your assets, the url should be …/assets/img/letsstart.jpg. In stead of assets/img/letsstart.jpg.

3 Likes
14

Correct on the path. The solution to my particular problem was that I mistakenly put the CSS in the variables.scss file instead of app.scss. The correct code now is this, for global background image:

ion-content {
  background-image: url('../assets/img/backgroundImg.png');
  -webkit-background-image: url('../assets/img/backgroundImg.png');
}

I am still unsure if I need the -webkit- or if I am even using it correctly, however. Any inputs on this would certainly be appreciated. From what I read I am doing this correctly for compatibility with chrome and safari web-views on the devices.

Robb

6 Likes
15

Thanks, I solve the problem by this way.

16

background-image: url(’…/assets/img/letsstart.jpg’);

17

This worked for me! I had tried with others ones but this was perfect!

18

which file and how to import to app.cor.scss.
in theme folder i have only variable.scss

19

My problem was solved by moving the background property from page’s individual css file (page.scss) to app.scss. Don’t know what’s the logic behind that though.

20

Spot on!
Guys, I spent way to much time trying to figure this out.

There would be an elegant way, but here is the quick one.
When you need to refer to an asset through your css rule, then instead of keeping that css rule in any component’s scss or variables.scss, just keep that in the app.scss. And use relative address of the asset
For example (the one that worked) :

.google-ico:before {
    background:url("../assets/images/logo-google.png");
}

Since it is the global scss, the rule will be available across the app.

1 Like
22

hi! i solved very easy… change “. . / . . /assets/imgs/picture.jpg” by “. / . . /assets/imgs/picture.jpg”.

1 Like
23

Another approach would be to convert the image to base64 and add them to your scss or css file.

Code would look like this.

 .class-of-your-component{
 background-image: url(data:image/png;base64, <the base 64 encoded image> !important;
 }