Make Images With Transparent Background Using GIMP, and More ...

Getting an image with transparent background

An apple with white background

Downloaded from History of the Apple Logo.¹

Thanks to Ruiz’s GIMP tutorial on Mbrsolution, I can remove the white background of the picture on the left.

Using GIMP

It’s a brief summary of the referenced tutorial. To save time, I won’t post screenshots here. You may refer to those in the tutorial.

Use the Fuzzy Tool and click on the background.
Click Layer → Transparency to check if an alpha channel has been added. If not, then add one.
Produce a transparent background by Edit → Clear.
Save it as a PNG file.
- See the detailed instructions in the tutorial.
- JPEG images can’t have transparent background.²

Centering an image in HTML

I’ve found Mrchief’s answer to Web_Designer’s question on Stack Overflow useful.³

Inserting shadows for images

Inspired by ParaImage’s tutorial on Hong Kong Silicon, I’ve written a small and simple HTML file to practice the concepts learnt from Stack Overflow and HK Silicon.
(Click “download” for viewing the HTML code in a web browser.)

A small HTML file for displaying pictures (transparent.html) download

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Image Backgrounds</title>
<style type="text/css">
img {
  -moz-box-shadow:0 0 0 10px 20px rgba(0, 255, 0, .5);
  -webkit-box-shadow:0 0 10px 20px rgba(0, 255, 0, .5);
  box-shadow:0 0 10px 20px rgba(0, 255, 0, .5);
  display: block;
  margin-left: auto;
  margin-right: auto;
}
body {
  background-color: rgba(0, 255, 255, .1);
}
h1 {
  text-align: center;
  color: rgba(255, 214, 0, .9);
}
</style>
</head>
<body>
<h1>An image with white backgroud</h1>
<p><img src="/images/posts/GIMPTransparentBg/apple-logo-2.jpg" alt="white bg"></p>
<h1>An image with transparent backgroud</h1>
<p><img src="/images/posts/GIMPTransparentBg/apple-logo-3.png" alt="transparent bg"></p>
<p>
<a href="//validator.w3.org/check?uri=referer"><img
  src="/images/valid-html401.png" alt="Valid HTML 4.01 Strict"
  height="31" width="88"></a>
<a href="//jigsaw.w3.org/css-validator/check/referer"><img
  src="/images/valid-css.png" alt="Valid CSS" height="31" width="88">
</a></p>
</body>
</html>

Using Firefox, I can dynamically change the width and displacement of the shadow of an image by choosing “Inspect Element” and hitting arrow keys.

fig1

Click the values of a CSS property.
Move the cursor to a number, then hit ↑/↓ to adjust the values.
Use ←/→ to move the cursor to another property.

Blog 1

Random Talk on Random Thoughts