Background-image

ionic-v1
1

hi there!

The background image isn’t rendered.

My view code: <ion-view title="'MyApp'" hide-back-button="true" class="login">

my css in app.css:
.login { background: url('../images/bg-login.png') no-repeat center; }

Anyone have any suggestions to style a view background?

2 Likes
2

You should be putting that background image on the ion-content, not the ion-view

.scroll-content{
  background-color:#0072bc;
}
3

@mhartington Thanks!

Works with external image. With localhost image doesn’t works. Very strange.

4

Are you doing this inline or in a separate css file?

5

Hmmm… I’m not sure what is “right”. I’m putting my background on the view as well.

.signup-background {
    background-image: url('../images/bgd5@2x.png')
}

<ion-view hide-nav-bar="true" left-buttons="leftButtons" right-buttons="rightButtons" hide-back-button="true" class="signup-background">

Since it has a repeating pattern, I can’t say if it’s out of alignment or not.

In any case @plcosta, your code “should” work. /did you try adding the class to the ion-content as suggested?

6

@mhartington: in a separate css file. The image url is ok.

7

@Calendee: yes, it works, when I used external url to image. With local url it doesn’t works.

8

@mhartington @Calendee: now it works, was a problem with apache server. I used nodejs to server files and it works!

Thanks for helping.

10

Another question about background in continuation.

What if I’m using ion-nav-view, ion-view and ion-content and want the same background for all views, but I want the background to be assigned dynamically, much like the weather app example.

Should I assign the background to each ion-content separately or is there a way to assign a background to ion-nav-view?

Right now, I’m using a directive to dynamically control the views in each tab separately. I can also think of assigning an abstract tab and assigning bg-image there. Just wanted to know if it can be done in ion-nav-view.

Thanks!

1 Like
11

I THINK I tried apply a background class to ion-nav-view. If I remember correctly it didn’t work. I had to apply it to each ion-view. Feel free to try though and let us know.

12

No. Can’t apply a bg to ionic view. I just went ahead and added the relevant directive to the tabs separately.

Thanks!

13

hey i found this simple but still its bit confusing…why cannot i place imge url in body tag directly…why do we .scroll-content for changing background…
and even the background hides as per new task are displayed (i used the same todo app that is described) so how can i make it visible behind all the tasks

14

hi
the given code is not working and its getting too complicated to set up a simple background image.
please reply

15

It does seem to be working for me.

Can you provide a codepen with the issues that you are having.

16

apologies
i did not specify it correctly to you
the code you posted works only with "background-color:#0072bc"
whereas when i use “background-image:url(“img/bgimg.png”);” it doesn’t work
and i have added the code in ion-content

.scroll-content{
background-image:url(“img/bgimg.png”);
}

so why cannot background image work in it.
In other tutorials i found only this way to add background so i’m confused

-thank you for previous reply

17

Are you sure the path is correct?

.scroll-content{
background-image:url("../img/bgimg.png");
}

Background images on ion-content do work.

1 Like
18

yes it is correct sir.
I ve tried it multiple times but i got disappointed by it.
So after multiple cross checking,i found out that most popular apps do have a white background and its customization is done on all other aspects.
So its fine.
IONIC is still the best.

-Thanks alot for your attention on this case

19

Any update on how to load a dynamic image for all the ion-content ?

For now I have a directive on each view to load the background image. Was thinking if there was a smart way to apply the same image for all of them without having to write it on all the templates.

1 Like
20

I have the same problem.If background-image:url(…) prop define in style.css it doesn’t work.
It only works if set image tag in template view/Path to image the same.

21

Hi

I think instead of background-image use:

background: url(’…/css/orng.jpg’);
of course change the name to your background image.

and to use that you will need to include app.css in your index.html file this way:

<link href="css/app.css" rel="stylesheet">

Hope that solve the problem