Transparent PNG Image In HTML - Complete Solution Download

Advanced & latest versions of browsers support transparent PNG by default. i.e. Internet Explorer 7, New Firefox, Safari and Opera etc. For IE 6 another version of this script works fine in which I gave you an example how to implement transparency in PNG for web pages. But what about background image and what if you have older browser like IE 5.5 etc.

This example covers all issues relating to displaying transparent PNG image in webpage, wether it be image or background and independent of browser.

For this script you will have to take care about following things.
- script tag which calls js file is little bit different with defer type inclusion.
- You will have to attach id to image and CSS as well.
- And a js file of course.

No need to put anything with simple image. Script will automatically identify img tag and if it gets transparent PNG, it will display it transparent. If you have used a CSS for TD which has background and that is PNG. You will assign an id to that TD and with little bit modification in the CSS, you will be able to manage it all.

While using PNG background, give TD exact width and height, in case you want to display it once, otherwise it will be stretched.

Anyways see it for yourself. Nonetheless it is powerful solution. Have fun!

Download Transparent PNG Powerful Example - Cross Browser, Compatible

Share This

Cascading Style Sheet Basics

its always a good idea to place CSS scripts outside the webpage and link to it. This helps in reducing size of pages and increases loading time.

In CSS you can redefine tag styles. Make IDs or you can create your own class to use in the pages.

Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

Note: If the value is multiple words, put quotes around the value:

p {font-family: “sans serif”}

Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

Grouping

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3,h4,h5,h6
{
color: green
}

Share This