0

So basically I'm creating a landing page and I want to use this nice picture of clouds with transparent background overlayed on top of a nice landscape so they can scroll up.
The issue is that the image(which indeed has a transparent background) does not have a transparent background when I put it in the application.
here's an image of what it comes out looking like: enter image description here

html:

<img src="assets/img/tryClouds.png" alt="Clouds" class="clouds">

scss:

.clouds{
      position:absolute;

      background:transparent;
      width:100%;
      height:30vh;
      top:35vh;
      z-index:24;

  }

any help that works would make me your biggest fan for all of life!! :D <333333333 I will owe you a life debt, Zaalbar KOTOR style.

Jon Atollah
  • 65
  • 6
  • Sorry to say that. But it seems that the clouds have no transparent background. The checkerboard pattern does not automatically mean that the background is transparent. I'm pretty sure, there is no other answer. – iPaat Oct 05 '21 at 00:21
  • Hmmm.. perhaps you're right. I will investigate. It claimed transparency when I downloaded it, but it was an Illustator file and perhaps the checkerboard background is somehow not keeping it's transparency. – Jon Atollah Oct 05 '21 at 00:35
  • Thank you very much. Found out the checkerboard was a complete imposter! Never would have suspected such a thing! this link helped me: https://bortonia.wordpress.com/2018/08/16/editing-vector-transparency-effects-how-to-delete-that-checkerboard-background/. I am now your greatest fan for life iPaat . If you need any assistance w/ a Rancor in the sewers, winning the swoop races, or taking the Ebon Hawk from Davik to escape Taris, I'm with u. – Jon Atollah Oct 05 '21 at 01:42

1 Answers1

0

Answer: Found.
Tools: Adobe Illustrator with .ebs files.
Actual problem: nothing to do with css, js, or angular

  • some files claiming "transparent" backgrounds, actually had a checkerboard background imitating a transparent background. These files were downloaded from a stock image supplier I pay a monthly subscription fee to use. I figured out how to make use of these excellent images that baffled me and tricked me!

Resolution:

  • Use adobe illustrator(I know, costs money, but great tool for this sort of thing and possibly the only option from what I've read)
  • Open the .ebs (vector) photo in illustrator.
  • Now here's where I was mistaken. I would "export as", choose png, then select "transparent" for background.
  • The issue is that the image itself was actually permeated with this imposter checkerboard. D:<
  • Now, it's basically impossible to select and delete each piece of this imposter ( |:< )"transparent" background with something as whispy as clouds!
  • Thankfully, if it's a good quality vector, the background will be contained in a layer.
    enter image description here
  • Click the layer for the background then click the upper right button circled in the screenshot and select "delete".

  • Now you're goooooooood 2 go *puts sunglasses on* ;)
Jon Atollah
  • 65
  • 6
  • Looks like a good answer but can be improved by formatting it. – m4n0 Oct 05 '21 at 05:24
  • What do you mean by that? Formatting the image, or the answer? In what way? Just curious if you have any additional input that could be potentially useful in the future. – Jon Atollah Oct 05 '21 at 15:52
  • Compare this answer format: https://nimb.ws/xDro2d with this: https://stackoverflow.com/a/23569891/ for example. Do you see the clear spacing? – m4n0 Oct 05 '21 at 17:08
  • Ahh yes, I do see the difference. You're right, it could benefit from some formatting via additional indentation + bold font and slight tweaking of the language. Thank you – Jon Atollah Oct 07 '21 at 19:40