How to set background color IONIC 4

Question

I having problems trying to change the background color in just one IONIC 4 (--type=angular) page. I am trying to add a class for the ion-content. In my html file I Have:

<ion-content class="fondologin">
...
</ion-content>

In my sass I have:

.fondologin{
    background-color: #111D12!important;
}

The background color is never changed. If I add --ion-background-color:#111D12; in variables.scss the background is successfully changed for every page but I just one to change the color in one page. How can I achieve this?

have you tried this `ion-content{ --ion-background: #111D12 !important}` — Mohan Gopi, Nov 29 '18 at 10:51
I am trying it inside app scss or inside my component sass with no success — Kevin Sanchez, Nov 29 '18 at 21:35

score 122 · Accepted Answer · edited Feb 22 '19 at 20:15

122

For some reason I solved it this way:

First of all I added --ion-background-color:#ffffff; in the variables.scss file inside theme folder.

In my Page scss I wrote:

ion-content{

    --ion-background-color:#111D12;
}

After that the background was successful set.

edited Feb 22 '19 at 20:15

Sampath

63,341
64
307
441

answered Nov 29 '18 at 21:47

Kevin Sanchez

2,215
2
11
19

6

You don't need to add it to variables.scss any more. – Waleed Asender Apr 09 '19 at 08:56
Sorry, but how can I do it on a specific page only? newbie here. If I do that it will affect all the pages. – Carljul Mar 24 '23 at 03:08

score 24 · Answer 2 · answered Jan 30 '19 at 10:56

I am going to repost the top commented answer , with an extra explanation

ion-content{
    --ion-background-color:#111D12;
}

Starting from ionic 4, Ionic component implements the concept of shadowDOM, and the old method of finding css selectors in the component that implements shadowDOM no longer works

As such, any modification can only be made if you change the variable that the component references

for example, if ion content references

--ion-background-color: #ffffff

The only way you can modify the background color is by doing this in your css file

ion-content{
    --ion-background-color:#111D12;
}

For more information, you can refer this youtube video https://www.youtube.com/watch?v=_D1lCoYzivA — Edward Choh, Jan 30 '19 at 10:57

score 15 · Answer 3 · answered Mar 10 '20 at 00:58

As of March 2020, using Ionic 5, the following is the only solution that seems to work without interfering with the background color of other elements. Place the following code in variables.scss file:

WORKING SOLUTION:

ion-content {
  --background: var(--ion-color-primary); // Replace this with color of your choice
}

The following solutions don't seem to work properly in Ionic 5.

Example 1:

ion-content {
  --ion-background-color: var(--ion-color-primary);
}

ISSUE FACED: Using the above code also changes the background color of List Items, Ionic Cards, etc. to primary color. So this makes them look ugly!

Example 2:

ion-content {
  background-color: var(--ion-color-primary);
}

ISSUE FACED: Using the above doesn't apply the background color at all!

Example 3:

ion-content {
  background: var(--ion-color-primary) !important;
}

ISSUE FACED: Using the above doesn't apply the background color at all!

user9088454 · Answer 4 · 2019-05-01T13:30:46.290

9

You can use like this...working good on my page.

ion-content{
    --background: #fff url('../../assets/imgs/intro.png') no-repeat center center / cover;
}

I hope it helps you :)

edited May 01 '19 at 13:30

answered Feb 28 '19 at 13:58

user9088454

1,076
1
15
45

score 6 · Answer 5 · answered Mar 13 '20 at 10:54

6

In My Variables.scss file I write this code and then it applies in every file.

 ion-content{
    --background:#f9f9f9;
 }

answered Mar 13 '20 at 10:54

Ghayyas Mubashir

138
1
7

score 4 · Answer 6 · answered Aug 19 '19 at 20:46

4

Also works in android deploy, If you need transparency in your background. You must setup like this way, i tried another way but doesn't work, only this way works for me.

ion-content {
  --background: rgba(0, 255, 0, 0.5);
}

answered Aug 19 '19 at 20:46

Miguel Carrillo

327
5
7

score 2 · Answer 7 · edited May 01 '19 at 18:14

2

Try this.

ion-content{
background-color:  #000000(use your color here) !important;
}

and let me know it is working for you or not

edited May 01 '19 at 18:14

Ram Ghadiyaram

28,239
13
95
121

answered May 01 '19 at 13:12

Nayan Dubey

109
10

score 1 · Answer 8 · answered Oct 17 '20 at 22:06

I have the same problem on Ionic 5

I use this solution based on other answers

in template:

<ion-content class="wrapper">
...
</ion-content>

in global.scss:

:root {
    --ion-bg-color: #f5f6fa;
}

ion-content.wrapper {
    --background: var(--ion-bg-color) !important;
}

or more simple:

ion-content {
    --background: #f5f6fa !important;
}

I also use this post: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

score 0 · Answer 9 · answered Nov 29 '18 at 09:37

It might be you CSS selector that is not enough acurate.

Try this :

ion-content.fondologin{
    background-color: #111D12!important;
}

If it is still not working, then inspect your ion-content element and try to find your CSS, and which property or other selector is overriding it

score 0 · Answer 10 · edited Dec 27 '18 at 10:02

0

Try this one:

    :host {
      ion-content {
        ion-background-color: #d5ffd5;
      }
    }

//Or 

 page-name{
      ion-content {
        ion-background-color: #d5ffd5;
      }
    }

edited Dec 27 '18 at 10:02

Derviş Kayımbaşıoğlu

28,492
4
50
72

answered Dec 27 '18 at 09:18

Rahul Jograna

856
10
9

1

It is recommended to add some descriptions for the answer you've posted – Derviş Kayımbaşıoğlu Dec 27 '18 at 10:02

score 0 · Answer 11 · answered Jan 09 '19 at 10:16

0

For changing the background on only one page:

ion-content{
--ion-background-color:  #00ABE1 !important;
}

Do not forget the !important or it might not work.

answered Jan 09 '19 at 10:16

Ivo Nikolov

43
1
7

WSD · Answer 12 · 2020-04-23T14:47:43.080

0

You can also use a different approach. Rather than dealing with the ion-content background directly, just wrap what is inside of the ion-content and apply the background to the wrapper itself. Example:

Component.html

<ion-content>
<section class="wrapper">
 ...
 </section>
</ion-content>

Component.scss

ion-content .wrapper {
min-height: 100%;
background: #EBEBEB;
padding-buttom: 10px;
}

edited Apr 23 '20 at 14:47

answered Apr 01 '20 at 02:31

WSD

3,243
26
38

score 0 · Answer 13 · answered Aug 04 '22 at 21:44

For me it was overriding .sc-ion-card-ios-h to set my cards colors

.sc-ion-card-ios-h {
    border-radius: 13px;    
    background-image: url("/assets/img/bg-panel.png");
    background-size: cover;
    border: outset 2px hsl(195deg 46% 40%);
    @media (max-width: 768px) {
      margin-inline-start: 0px;
      margin-inline-end: 0px;
    }
}

score -1 · Answer 14 · answered May 05 '20 at 06:39

<IonContent color="primary" >   </IonContent>

you can also use "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".

For adding additional color , please check https://ionicframework.com/docs/theming/colors

How to set background color IONIC 4

14 Answers14

Linked