La gif perde la sua trasparenza !!!

[Maestro76]

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.

@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??

[ResianTaxidrive]

non capisco, hai due immagini sovrapposte? una gif sopra una jpg? NOn mi è chiaro.

IN alternativa, sei sicuro di aver esportato la gif correttamente? che programma hai usato?

[Maestro76]

Grazie per la risposta ResianTaxidrive,

si tratta della piattaforma Oscommerce.
il file Html ha un <div> dal quale carica il #content_box_top
dal file css.

Come puoi vedere il #content_box_top ha una immagine di background .gif

Questa immagine è per la parte superiore trasparente.
Ho utilizzato Photoshopo salvando per web in gif e definendo la trasparenza.
L'immagine vista in locale o singolarmente ha la zona trasparente.

Quando viene caricata all'interno del sito la zona trasparente diventa bianca come se
perdesse la proprietà trasparenza o che questo <div> abbia sfondo bianco.

Ho provato a cercare tutte le caratteristiche colore ma non risulta nessuno sfondo bianco.

Puoi vedere la pagina su www.comict-shirt.com

ti puoi rendere conto che il riquadro che contine le magliette e che si sovrappone
alla testata ha un quadrato bianco cosa che se scarichi è trasparente.

Spero di essere stato chiaro.