Trouble eliminating white, no-data pixels on raster image in Leaflet.js, served via GeoServer

Question

I'm learning leaflet.js, and want to be able to create a web map that can be used alongside GeoServer. My main problem now is eliminating a white background from my imported raster layer, brought in via L.tileLayer.wms. I have had this problem before, albeit with vector data, and I solved that problem by setting transparent: true and zIndex: 2, while the base map was set to 1. When I set my new raster layer transparency and zIndex to those same parameter values, the whole layer disappears; now all I can see is my base map. All I can find online for eliminating this white background is to set the zIndex and to set transparent: true. Hoping someone out there has encountered this issue before and can teach me something I'm missing.

Attached is my code sample:

var esri = L.esri.basemapLayer('Imagery').addTo(map);

var test_layer = L.tileLayer.wms('http://localhost:8080/geoserver/learn_js/wms',{
    layers: 'learn_js:geotiff_coverage',
    format: 'image/png',
    zIndex: 2,
    transparent: true
  //opacity: 0.5
}).addTo(map);

Answer 1

The problem appears to be with the raster image I am using. I switched raster images to one within my area of interest, and now the image appears to be loading with background pixels eliminated. I still do not know why one works and the other does not, but at least I know there were no coding or geoserver issues at fault. Perhaps something with the internal structure of the raster image was causing this hangup. I do know that with my original image, the tile layer preview within the geoserver dashboard would not display the image as a png, but would as a jpeg. With my new image, geoserver's tile layer preview displays the image in all formats.