overlap image with css

[beho86]

Hello ,
Here's my current css file:

body { margin:114px 0 0 0; line-height:16px; font-family: Tahoma, Arial; background: url(images/body_top_bckg.jpg) no-repeat center top #171c20; color:#bed7e6; font-size:11px;}
a { color:#018BC1;}
a:hover { text-decoration:none;}
#header {}
a:active, a:focus {outline: 0;}
#logo { padding:0px 0 50px 0;color:#fff; text-align:center;}
#logo a{ color:#fff; text-decoration:none; font-weight:bold; font-size:24px; text-transform:uppercase; }
#menu {color:#fff; text-align:center; margin-bottom:55px;}
#menu ul {text-align:center;list-style:none; padding:0;}
#menu ul li {display:inline}
#menu ul a { font-weight:bold; font-size:14px; text-decoration:none; color:#fff; background-color:#445d6c; padding:0 10px 2px 10px;}
#menu ul a:hover { background-color:#f26513;}
#main {background: url(images/body_all_bckg.jpg) repeat-y top center;}
#content {width:780px; margin:0 auto;}
#text { width:520px;}
#text p { margin:7px 0 7px 0;}
#text li {}
#sidebar {float:right; width:227px; background-color:#0b0e10; margin:10px 10px 0 0; }
#sidebar_top { width:227px; height:40px; background:url(images/sidebar_top.jpg) no-repeat;}
#sidebar_text { padding: 0 30px;}
#sidebar_text p { margin:5px 0 5px 0;}
#sidebar_bottom { width:227px; height:57px; background:url(images/sidebar_bottom.jpg) no-repeat;}
#sidebar h2 { font-size:13px; text-transform:uppercase; color:#fff; margin:20px 0 0 0; padding:0; background:none;}
h1 {margin:30px 0 0 0; padding-left:45px; text-transform:uppercase; font-size:24px; color:#fff; background:url(images/h1_bckg.jpg) no-repeat; line-height:normal;}

#footer {background:url(images/footer_bckg.jpg) no-repeat 100% 100%; height:180px; clear:both; width:780px; margin:0 auto; }
#left_footer { float:left; padding:10px 0 0 10px; color:#fff; font-size:12px;}
#left_footer a { color:#fff;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right; padding:60px 30px 0 0; color:#fff; font-size:12px; text-align:right;}
#right_footer a { color:#fff;}
#right_footer a:hover { text-decoration:none;}
------------------------------------------------------------------------

I need to add (hide) an image behind the first image (body_top_bckg.jpg) , without missing any of the overall format???

Thanks in advance,

[Fang]

Put the other image in the html element

[beho86]

Thanks Fang for your quick help,
What do you mean html element, you mean in the .html file, just add <img........> , but how is it gonna overlay it?

I am trying to learn about CSS, I tried to position the image, but it goes over the the LOGO image, I need it behind the LOGO, or any other large image ( such as the background).


Thanks in advance,

[Fang]

html {background:url(anImage.jpg) no-repeat}

[beho86]

Hello Fang,
Thanks for your help,
I added this line to the css file:

#hdd {background:url(http://www............gif) no-repeat}

then in the html page:
<p class="hdd"> <img src="http://www.........gif">

I know it's wrong!!!! , but how can I do it this way, I mean give it a name then just add class= name before the image.

* There is an external link for the image.

---------------------------------------------------------------------------
The way I am doing it right now,
I have both of the following codes in the index.html file:

<style type="text/css">
p.one
{
position:fixed;
left:1188px;
top:549px;
}

</style>

<p class="one"> <img src="http://www.........gif">

it works, but the image is hidden behind another image , not the background.


Thanks for your time,

[Fang]

The html is an element like any other; it can have a background image.