How to create a semi-transparent png for your web page

Things you'll need

• A proper graphics editor link GIMP.
• A proper web browser like Mozilla Firefox.
• A proper text editor like gedit.

Graphics Steps

1. Open up GIMP.
2. Create a new image. When you do this you are offered size etc, but there is also an advanced section which you need to open. Choose to have a transparent background.
3. Add a new layer to your image.
4. Now, on the new layer add a shape. First choose the colour you want your shape to be. Then choose the shape. Create the shape on your image.
5. In the layer window you should now be able to change the opacity of your layer. Move it down to about 50%.
6. Save you image as a png.

The HTML Steps

1. Create a simple HTML page.
2. Create a div and give it an id.
3. Create a reference in your HTML Head to a style sheet.

The CSS Steps

1. Create a .css file with the same name as you referred to in your HTML page.
2. In your css file create an entry for the body of your page and add a coloured background. Just so that you can see the semi-transparency.
3. Now create a reference to the div you created in your HTML page.
4. In the reference for your div add a reference to the background image you created in your image editor.

Review
Now save everything and preview it in your web browser.
For a further test add some text your your div.

Done.