Transparent image problems

hi! i’m using twine 2.3.9 and harlowe 3.1. i’m trying to use png images that have a transparent background, but every time i insert them in my story they show up with a white background. the background of my whole story is another image. does anyone know what might be happening? i don’t know any css so it’s kinda tough to figure out what’s going on. thanks :slight_smile:

Hi Violetta :slight_smile: Do you have any CSS in your story at all, or are you just pasting one image over other?

no, i didn’t add anything! i just put one image in the background in the “story stylesheet”, and now i’m trying to put images on my passages.

Can you show us the CSS from your project’s Story Stylesheet area that you used to display the background image? Knowing what CSS selector you targeted and what background related CSS attributes you used may help solve the issue.

here it is:

tw-story {
background-image:url(“https://i.pinimg.com/originals/43/b6/b1/43b6b1c35afba9f2a52da49dacfefefc.gif”);
background-size:cover
}

if i take the background image out, it still doesn’t work, the image still shows a white background.

Can you open your PNG image up in something like GIMP or another image editing program and confirm it actually has transparency? Sometimes icons and images I find online say they are “transparent” but actually have a white background.

Image transparency will work on web by default, so it should “just work” when you put your image in via an <img> tag or what have you.

Or are you adding the image as a background on another element? At which point you need to make sure it has the css background-color: transparent; set.

1 Like

yeah, it is transparent! it’s this one: https://i.imgur.com/JdYjZIu.png and i’m adding it normally, like this:

< img src=“https://i.imgur.com/u5kZIar.png”>

Hey, you’ve got two different links there. The first one is transparent. The second has a white background.

1 Like

omg! so it was the image the whole time. thank you, it’s working now, sorry for the silly mistake :sweat:

1 Like

No worries. I miss silly stuff all the time. Hope the project turns out well!

1 Like