ARTICLE AD BOX
I'm making a webpage that has a large transparent (no background/PNG) image of a train. I must reiterate that this is legitimately a transparent no-background image, as in, I removed the background myself, the canvas I used was transparent (NOT white), the site I uploaded it to kept it transparent and when I click + drag the image, it has no background.
But as soon as I added a background to the body, the image became surrounded by a white square background. This implies that the PNG either already had a white background despite all the above orrrr that I'm doing something wrong.
I am sure there's something silly I'm overlooking, but I can't figure it out. Any help appreciated!
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @font-face { font-family:"AiN"; src: url(fonts/AutumnInNovember.ttf); } @font-face { font-family:"Inf"; src: url(fonts/Infinitesimal.ttf); } @font-face { font-family:"Jakob"; src: url(fonts/jakobs-handwriting.regular.otf); } body { background-image:url('https://i.imgur.com/zVxPY0f.jpeg'); } .nav { position: fixed; margin-left:-9px; background: #ffffff; overflow-x: hidden; padding: 8px 0; } .nav img { height:500px; z-index:5; } .abt { background-size:cover; width:500px; height:300px; float:right; } .abt img { height:300px; float:left; margin-left:-60px; opacity:1.0; } </style> </head> <body> <div class="nav"> <a href="https://pebblequeen04.neocities.org/index.html"> <img src="https://i.imgur.com/WFOZTRC.png"></a> </div> </body> </html>