Cari amici,

sono inciampato in un problema di cui non riesco a venirne a capo.

Il famoso programma di negozi online Oscommerce ha un file CSS su cui definisce le immagini.

Nel mio caso due immagini si trovano sovrapposte.

A questo punto ho sostituito l'immagine superiore con una gif scontornata e salvata
con un aporzione trasparente, soltanto che quando la carico perde la trasparenza
e mi da il colore bianco.

Non sò se è un colore di default o se è uno sfondo.

Vi posto il codice per vedere se se ne cava fuori qualcosa.

codice:
@charset "utf-8";

/* CSS Document

    Copyright (c) Freeoscommerce.com 2009

	This file is part of a freeoscommerce.com template.  Please visit http://www.freeoscommerce.com for licensing and other information.
*/

html {
height: 100%;
} 
body {
height: 100%;
background: #258fe1;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; 
color: #000000;
}

#wrapper1 {
z-index: 0; 
position: relative; 
width: 100%; 
background: #ffffff;
}
#background_top {
z-index: 1; 
position: absolute; 
width: 100%; 
top: 0px; 
left: 0px; 
height: 644px; 
background: url(images/background.jpg) top center repeat-x;
}
#wrapper2 {
z-index: 2; 
position: relative; 
width: 1003px; 
top: 0px; 
left: 50%; 
margin-left: -501px;
}
#wrapper3 {
z-index: 1; 
position: relative; 
width: 927px; 
left: 38px; 
top: 0px; 
background: #ffffff;
}
#top_menu {
position: relative; 
width: 927px; 
height: 81px; 
top: 0px; 
left: 0px; 
background: url(images/top_menu.jpg) top center;
}
#top_menu_links {
position: absolute; 
width: 927px; 
margin-top: 46px; 
text-align: center; 
color: #0b4995;
}
#top_menu_links span {
margin-left: 12px;
margin-right: 12px;
}
#content_wrapper {
position: relative; 
overflow: auto; 
margin-top: 138px; 
background: url(images/box_middle.jpg) 272px 0px repeat-y;
}
#side_menu {
position: relative; 
float: left; 
width: 200px; 
padding-left: 36px; 
padding-right: 36px; 
padding-bottom: 25px; 
padding-top: 90px;
overflow: hidden;
}
#content_wrapper2 {
position: relative; float: left; 
width: 641px; 
min-height: 350px;
}
#content {
z-index: 3; 
position: relative; 
width: 550px; 
margin: 45px; 
margin-bottom: 0px;
overflow: hidden;
}


/// qui c'era una jpg che copriva ed ho sostituito con una gif a metà trasparente///
#content_box_top {
position: absolute; 
width: 641px; 
height: 330px; 
top: 0px; 
background: url(images/box_top.gif) top center no-repeat;
}

#main_image {
z-index: -1; 
position: absolute; 
width: 927px; 
height: 200px; 
top: 81px; 
left: 0px; 
background: url(images/main_image.jpg) top center;
}
#website_name {
position: absolute; 
width: 500px; 
top: 38px; 
left: -40px; 
text-align: center; 
font-size: 25px; 
color: #ffffff;
}
#website_name a {
color: #ffffff;
}
#left_shadow {
position: absolute; 
width: 38px; 
height: 624px; 
left: 0px; 
top: 0px; 
background: url(images/left_shadow.jpg) top center;
}
#right_shadow {
position: absolute; 
width: 38px; 
height: 624px; 
right: 0px; 
top: 0px; 
background: url(images/right_shadow.jpg) top center;
}
#bottom_stripe {
position: relative; 
width: 100%; 
height: 88px; 
top: 0px; 
background: url(images/bottom_stripe.jpg) top center repeat-x;
}
#content_box_bottom_wrapper {
z-index: 1; 
position: relative; 
width: 1003px; 
top: 0px; 
left: 50%; 
margin-left: -501px;
}

#content_box_bottom {
z-index: 2; 
position: relative; 
width: 641px; 
height: 58px; 
left: 310px; 
background: url(images/box_bottom.jpg);
}


#footer {
position: relative; 
width: 850px; 
top: -20px; 
left: 50%;
margin-left: -425px; 
padding-bottom: 0px; 
text-align: center; 
color: #ffffff;
}

a:link {
	color: #4a83d1;
	text-decoration: none;
}
a:visited {
	color: #4a83d1;
	text-decoration: none;
}
a:hover {
	color: #0033CC;
	text-decoration: none;
}
a:active {
	color: #4a83d1;
	text-decoration: none;
}

/* Hide icons in page headings */
#pageIcon, td.pageHeading img {
display: none;
}

h1 {
font-size: 14px;
font-weight: bold;
}
h2 {
font-size: 13px;
font-weight: bold;
}
h3 {
font-size: 12px;
font-weight: bold;
}
h4 {
font-size: 12px;
}
h5 {
font-size: 12px;
}
h6 {
font-size: 12px;
}

hr.accessibility {
height: 1px;
color: #000000;
}

td.infoBoxHeading {
padding-top: 10px; 
padding-bottom: 0px;
font-size: 12px;
font-weight: bold;
}

td.pageHeading {
padding-top: 5px;
padding-bottom: 10px;
font-size: 14px;
font-weight: bold;
}

div#navigation {
margin-top: 0px;
margin-bottom: 15px;
}

div.infobox_heading {
font-weight: bold;
padding: 5px 0px 5px 0px;
width: 100%;
}

div.infobox_content {
width: 100%;
}

td.main textarea {
height: 200px; 
width: 330px;
}

textarea {
width: 100%;

Che posso fare??