Transparent background for content not working on iOS



in my application i am using a background image for the whole app and the pages use the ion-content with

ion-content, .content-ios {

this works like charm on android and in desktop but on iOS ( even simulated in Chrome ) it does not work but instead i get a black background.

any ideas?


Try this:

ion-app {
    background: none;

    ion-content, .content-ios {
        background: none;

        ion-list {
            background: none;
            opacity: 0.6;


thanks, but that did not help. still black


The problem then is because you have a layer on some level with black color, which you have to put transparent. This example I tried in my application and it works perfectly. To solve the problem you need knowledge of CSS.


hey, can you show the code for this please :slight_smile:


hello, you can try with the standart “sidemenu” template:
and add this scss:

background: url('../../assets/img/bg.jpg');
background-repeat: no-repeat;

ion-content {
} [padding], [padding] .scroll-content{
ion-app.ios [padding], ion-app.ios [padding] .scroll-content{



I just tried this code below and it caused the app background to turn black (just like yours)… I then tried to figure what the problem was, but by commenting out background:none; it fixed the problem. But when I uncommented this, it went black again. Then the problem was fixed by itself after few mins.

ion-content.ios [padding], ion-content.ios [padding] .scroll-content{

Not sure if this was a temperory bug, but does your background work now? it worked for me by doing nothing :smile:

Hope some moderator can help or explain this issue :slight_smile:


i am testing in chrome desktop ( macos ) and the issue persists.


Add the following line into src/theme/variables.scss

$content-ios-transition-background: transparent;

Default value of this variable is black. It makes the background black!


thx, worked like a charm


Is it me or this is not working anymore?

I have a black background somewhere but I cannot find it out.

I even tried this. I still have a black background (the tag has a transparent class ) :

    $content-ios-transition-background: transparent;
    &.transparent {
            background-color: transparent;

I even created a plugin that put a transparent background in all UIView:

        [view setOpaque:NO];
        [view setBackgroundColor: [UIColor clearColor]];

I am using

s: (/Users/millerf/Documents/www/Mozaik/mzk_app/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.1.4
Cordova Platforms  : ios 4.5.2
Ionic Framework    : ionic-angular 3.9.2

Anyone has any idea?


Actually I got it fixed.

$content-ios-transition-background HAS to be in variables.scss. I did put it within a sub scss file.