Search code examples
htmlcssionic-frameworksassionic4

png image make background color black in css ionic

I am using css with ionic . Using image in background but when i use image that maked background black.without image it looks fine.

ion-content {
    --background:  url("/assets/product_background.png") 0 0/100% 95% no-repeat;
--ion-background-color: linear-gradient(to bottom,  #1a1240 35%,#6528af 70%,#736eed 100%);
}

With Background image

enter image description here

without background image

enter image description here

Solution

  • Just add all of your properties to the --background value.

    In your case:

    --background: url("/assets/product_background.png") 0 0/100% 95% no-repeat, linear-gradient(to bottom, #1a1240 35%, #6528af 70%, #736eed 100%);

    This will add your image and then include your gradient.