Transparent background goes white

  • 1
  • Question
  • Updated 6 years ago
  • Answered
My logo is a png image with a transparent background, however, when I save it on the website, the background goes white. How can I correct that?
Photo of Shanda Quintal

Shanda Quintal

  • 3 Posts
  • 1 Reply Like

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Shanda,

If you can tell us your site name this can be looked at .?
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Shanda,
For my own site, I didn't have problems when I converted the png images to gif images and loaded the gif images in Sitebuilder. To convert, open the png in Infranview (a free image editing program that can be found online) and then save the image as a gif- has option to select the transparent color on saving
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Most likely, the reason that your PNG is going white is because the sitebuilder is optimizing it when you enter it into the banner editor to resize it to fit the space allowed.

The sitebuilder will (or did when I last used it to edit my site) convert resized images from PNG to JPEG.

What I would do is...

1) Using GIMP (or another image editor on your computer) create a PNG with a transparent background the EXACT dimensions as that of your style's banner (look on the bottom right of the banner before editing to find the dimensions).
2) Then paste your logo image where you want it in the new banner image.
3) Save image as a PNG when satisfied to your computer.
4) Upload the image to your file manager with the optimization turned off.
5) Open your site to edit and then add the image to your banner without any resizing as this will most likely cause your banner to go white.

That should do it I reckon...

Happy site building and by the way... BOO, long time no see to those who know me...

Ed

If the lady bears don’t find you handsome they should at least find you handy...Don't forget to share the bear...

Honey Bear Playhomes Tips and Favs in one place... A Honey bear Playhomes Tip ;)
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Very nice to see you here Ed, and thanks for the extremely helpful reply, as always!
Photo of Ed-a-Torials @ Honey Bear Playhomes

Ed-a-Torials @ Honey Bear Playhomes, Champion

  • 2582 Posts
  • 279 Reply Likes
Appreciate the appreciation... ;) Had it not been for focusing on health I would have undoubtedly been here all along. Kinda feel like the old man among so many newcomers...

While I have not got the financial rewards from it yet, one of my many inventions (can't say what) is lined up to be a product on a television home shopping network (can't say which) in the 2014 lineup and sold worldwide soon thereafter. Not getting any of those wonderful 7% royalties yet and as such I am still very much cash poor these days. Any contractor support jobs open that I can do from the road perhaps? LOL ;)

Seriously, I am sooo looking forward to the 7% royalty for 20 years from my invention. At least I have something to leave my family should I check out you know... I have a few more very solid inventions that I am looking for homes for and hopeful that will aid in my retirement package so to speak. Leaving the Seattle area soon in my motorhome to drive the country and pan for gold along the way. As I still can't do any heavy lifting or heart strenuous activities, I'm still trying to find creative ways to fill that 100 gallon gas tank. Sure missing my 50 mpg Civic as this boat only gets 8mpg. :(

Having to wait a full year before I get those royalty checks in the mail I think that I might try to build a site or two along my travels in exchange for a full tank of gas to get me 800 miles further down the road. RV parks are usually good for wifi these days.

Anywho... missed the lot of you and wish you all well... Cheers from afar.
Photo of markallenhays

markallenhays

  • 24 Posts
  • 4 Reply Likes
Dear Shanda: Ed's analysis is correct. If you resize an image in SiteBuilder, it will convert the file and you will lose the attributes of the original, e.g. transparency / alpha channel settings in PNG, and animation settings in GIF files.

There is another way to work around this problem. You can edit the CSS for your site and replace the banner image name with your own. You can also replace or modify other images in the Yola template. This is one of the key advantages of Yola compared to other web-based site development tools -- they provide open access to CSS with 'silver' and 'gold' level subscriptions.

For example, I modified the layout of the Urban Smooth template to customize the page design and make the background white in the main section. Here is a copy of one of the CSS changes.

div.content_top_cast {
background:url("resources/content-shadow-top2.png") no-repeat top center transparent;
_behavior: url(http://s1.yolacdn.net/V0000102/templa...);
margin:0 auto;
padding:0;
height:27px;
width:956px;
}

The new image I modified is named "Content-shadow-top2.png". I uploaded this image with File Manager, so the path is "resources/". Use this folder name in front of your file names.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Shanda

To add on all this knowledgeable help from our power users on this thread (thank you by the way!): There is one thing which is actually a bit of an error at the moment.

The problem is that even if you upload a picture with the exact banner dimensions, the Banner Editor may still crop it and thus remove transparency from .png image files or deteriorate the resolution of an image. We're busy working on a solution for this.

The error is: For some reason the Banner Editor automatically adds 1 px to the height of the banner area, so it will always crop your uploaded picture.

Workaround: Either you create a banner which has 1 more pixel for the height as it says in your Yola account, or you reduce the height of the banner area by 1 pixel in your Site CSS Editor.

I'm sorry for the inconvenience this may be causing you. Please let me know if you need further assistance.
Photo of Shanda Quintal

Shanda Quintal

  • 3 Posts
  • 1 Reply Like
Wow, thanks guys. I'm just getting back to this so I'm just seeing the responses. Sorry I didn't respond earlier, and I really appreciate it.

Please forgive me for not using the correct terminology as I'm not really techie, but I can mess around with things and see what happens. That being said, I didn't like the banner block thing on my page so I took it out in the CSS edit part. All I want to do is upload the logo as an image by using the photo widget. And even though I've resized it to the exact dimension I want AND it shows the image with a transparent background, once I publish the updated site the background goes white - http://filmindustryexpo.com.

I'm going to try these suggestions and if I can't figure it out, I'll be back. Thanks again, everyone!

Shanda
Photo of Shanda Quintal

Shanda Quintal

  • 3 Posts
  • 1 Reply Like
I got it! Whoo hoo! I had been uploading the image and then doing minor resizing once it was uploaded. That was causing the problem.

Now on to figuring out how to do flash stuff...

Thanks again!