background image transparency concern using div and css - css

Question

Hi guys i'm using CSS and i'm still learning div in replace of Table and rows. I'm wondering whenever i attached a background image without background just plain image (transparent background) how come it shows a white background on the website outlook even though its background in photoshop is transparent? how do i remove the white background? please direct me to the right track. Thanks
i tried background-color:transparent; it's not working :(
This is my output image used on css div baclground-image http://postimg.org/image/75t1jgqk3/
THis is the view of image having transparent background in Photoshop http://postimg.org/image/o1jddulcx/
here's my css and html code http://jsfiddle.net/XpCmb/
#charset "utf-8";
/* CSS Document */
body
{
margin:0px;
padding:0px;
}
#container
{
padding:30px;
min-width:1024px;
min-height:768px;
background:#d8e0eb;
border:0px;
margin:0px;
}
#container2
{
width:1000px;
height:730px;
background-color:#FFF;
padding-top:25px;
padding-bottom:15px;
}
#wrapper
{
min-width:800;
min-height:600px;
}
#header
{
width:900px;
height:120px;
background-color:violet;
}
#menubar
{
background-color:#FFF;
width:452px;
height:30px;
padding-top:5px;
padding-bottom:5px;
text-decoration: none;
float:;
}
#content
{
width:1000px;
height:40px;
background-color:#f9f2e0;
}
#contentbody
{
width:1000px;
height:auto;
padding-top:50px;
margin-left:0;
margin-right:0;
background-color:#f9f2e0; /*baclground of content holder body */
padding-bottom:100px; /*adjust the space bottom of content holder text */
}
#contentbodytext
{
margin-left:50px;
text-align:left;
}
ul
{
list-style-type:none;
padding:0;
margin:0;
display:inline;
}
li
{
list-style-type:none;
background-color:#;
border-right:1px solid #CCC;
float:left;
padding-left:30px; /*adjust space of menu text to each other*/
padding-right:30px;
padding-top:8px;
padding-bottom:8px;
}
a:link
{
text-decoration:none;
} /* unvisited link */
a:visited {text-decoration:none;
} /* visited link */
li:hover
{
background-color:#ffd640;
}
ul#mcolor li:hover > a
{
background-color:#ffd640; <!-- sets all link color when hovering to yellow -->
}
ul#mcolor li.active a
{
color: rgb(25, 25, 25);
background-color: #ffd640;
}
#mcolor li.active {
background: none repeat scroll 0 0 #ffd640 !important;
}
/*FOLLOWS ARE MISCELLENEOUS LIKE DIVS image holder etc. */
/*ul:hover li
{
opacity: 0.5;
}
ul li:hover
{
opacity: 1;
}
nk */
#image1
{
padding-left:50px;
float:left;
}
#p1a
{
padding-left:350px;
}
#introductiona
{
padding-right:50px;
text-align:justify;
text-align:justify;
}
#p1
{
margin-left:50px;
text-align:left;
margin-top:70px;
}
#bulletin
{
float:left;
margin-left:10px;
background-image:url(bulletinboard.jpg);
background-size:550px 260px;
background-repeat:no-repeat;
width:550px;
height:260px;
background-color:#f9f2e0;
}

Answer 1

Your image is saved as a jpg, which does not save transparency. Save your image as a PNG or a GIF with transparency and you should fix your problem.