Ionic 4: Changing Ion-Content Background Does Not Work

ionic 4: changing ion-content background does not work

You can use the CSS-Variable --background to change the background of ion-content.

Example:

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

Put this into your components, pages or global scss.

For reference see: https://beta.ionicframework.com/docs/api/content#css-custom-properties

How to set background color IONIC 4

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.

ionic 4 ion-content background-image not showing on device

didn't have the chance to solve this problem using the ionic-content, so what I did is to change the ionic-content to div, and it solve my problem. Working in web and android device.

Changing background of ion-content ionic 4 not the inside elements

From what I've found with experimenting is that --ion-background-color: sets a global background default (which defaults to #fff if not set) for ionic components. To just target ion-content it would be better to set it like ion-content {--background : #f4a942;}. You can set an ion-grid background like so ion-grid {background: #aaa;}. The issue with the ion card is that by default its background is set to var(--ion-item-background,transparent), so it will use the ion-item-background if one is set or it will be transparent, you can ignore all this by declaring the background with !important like ion-card{--background: #aaa !important;}.

If you want to find out if the component needs a --background or just background I've been having to check the ionic docs to see if it has --background in its CSS Custom Properties :/

Ionic 4: ion-item background transparent has no effect

Update:

Finally found the cause for that weird behaviour. Looks like the .list-ios on ion-list was the malefactor.

This did the trick for me:

ion-list {
    background: transparent;

    ion-item {
        --background: inherit;
    }
}

Change Background of Single Page (ie Component) in Ionic 6 Vue 4.5.2 :

The easiest solution would probably be to just pass the background-color as prop to your BaseLayout component like this:

BaseLayout.vue

<template>
  <ion-page>
    <ion-header translucent>
      <ion-toolbar>
       ..various buttons
      </ion-toolbar>
    </ion-header>

    <!-- DEFAULT SLOT for content -->
    <ion-content 
      class="customStyles" 
      fullscreen 
      id="main-content"
      :style="`--ion-background-color: ${backgroundColor}`"
    >
      <slot></slot>
    </ion-content>
  </ion-page>
</template>

<script>
export default {
  props: {
    backgroundColor: {
      type: String,
      default: 'white'
    }
  }
}
</script>

This way you can easily override the background color, by passing the value to the component:

<base-layout
  background-color="#000000"  
>
   <!-- some ionic components for content -->
</base-layout>

Set background image for Application - Ionic 4

To set a background of the App, the path app the image needs to be given as in the hosted environment.

ion-content{
    --background: url(http://10.100.176.52:8100/appBg.png) !important;
    --background-repeat: no-repeat;
  }

This will set the image as background for the complete Application.

---

Related Topics