1

I know I'm pretty pathetic but I ve this problem:

I used an image and a colour for the background of a page in my homepage. Everything ok but the result...mmmmm. Then I found on internet some code for obtaining a wonderful gradient colour on the background colour. I think it ll improve the page in an amazing way

BUT

the image disappeared... If I take the "internet code" for the gradient colour the image come back. Here s the code:

    #particles-js {
    width: 100%;
/*from here the image*/
background-image: url('../images/Image.png');
background-repeat: no-repeat;
background-position: center;
background-size: 40% ;
/*from here the code I found on internet*/
background: #e0f3fa;  
background: -moz-radial-gradient(center, ellipse cover,  #e0f3fa 0%, #d8f0fc 57%, #4dc8f0 100%, #b6dffd 100%);  
background: -image-webkit-radial-gradient(center, ellipse cover,  #e0f3fa 0%,#d8f0fc 57%,#4dc8f0 100%,#b6dffd 100%);  
background: radial-gradient(ellipse at center,  #e0f3fa 0%,#d8f0fc 57%,#4dc8f0 100%,#b6dffd 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=1 ); 
}

Thank you very much!

user2969243
  • 11
  • 1
  • 1
    Please, show us your css, so we can help you better. – Flavio Caruso Nov 21 '19 at 16:34
  • 1
    I think this answer is what you're looking for https://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image – Sam Walpole Nov 21 '19 at 16:36
  • 1
    Because a gradient background **is not a color**...it's treated as a background image and so overrides your previous rule. – Paulie_D Nov 21 '19 at 16:37
  • 1
    That's because `background`property overrides previous `background-mage`. – DanieleAlessandra Nov 21 '19 at 16:37
  • 1
    `Background` is shortcut way of defining everything about background. This means you define `background-image` also if you use `background`. Also be aware that you cannot use linear gradient and background image together on same div – Nagibaba Nov 21 '19 at 16:39

0 Answers0