Is this possible?

[ScottDB]

Hi, I am trying to get a background image to show one the page with css and have over the top of it my php chat code to bring up my chat to fit inside of it. I could probably edit my css for my chat but I have 3 other images that I want to do the same thing to for my news box, site stats and such. Any and all comments would be apreciated. Even if I am going about this all wrong.

Here is what I have so far. I can add the image by background url in css page which I can't seem to work properly, or by positioning calling up the image in the php page.

When I add the image to the css page as a background image I can get it to come up sort of but the edges are cut off as if the image is somehow bigger. Also the image wont appear until there is text there in the php page. If I use the php code for the chat it works but only if there is text and a lot of it.

for calling up in the image in the php page I have: See page here also

/* Extra banners */
.extra-banners {
	position:absolute;
	left:-40px;
	top:-110px;
	}
	.extra-banners .second {
		position:relative;
		margin-top:-60px;
		}

	.extra-banners .third {
		position:relative;
		margin-top:-35px;
		}
Then the php page I have the following to call it up
</div>
                  <div class="col-3">
                  	<ul class="extra-banners">
                      <li><a href="#"><img src="http://images/banner2edit.png" alt=""></a></li>
                      <li class="second"><a href="#"><img src="http://images/banner3.png" alt=""></a></li>
                      <li class="third"><img src="http://images/banner3edit.png" alt=""></li>                     
                      </ul>     
                    </div>                   
                  <div class="clear"></div>

Then for getting it to show up with background image in css: See page here also

/* Extra banners */
.extra-banners {
	position:absolute;
	left:-40px;
	top:-110px;
	}
	.extra-banners .second {
		position:relative;
		margin-top:-60px;
		}

	.chat {	
    background:url(../images/banner3edit.png) no-repeat 0 0%;
	position:absolute;
	left:-40px;
	top:175px;
	}

Then the code for it in the php page is this
<div class="col-3">
                  	<ul class="extra-banners">
                      <li><a href="#"><img src="http://images/banner2edit.png" alt=""></a></li>
                      <li class="second"><a href="#"><img src="http://images/banner3.png" alt=""></a></li>                      
                      </ul>     
                    <div class="chat">Lets see what this will do this is some text to show where I am here. a blaa bla bla blaa bla bla blaa bla bla blaa bla 
                    <?php
                    $pathToShoutBox = 'shout';
                    include("$pathToShoutBox/shoutbox.inc.php");
					?>
					</div> 
              </div> 
                  <div class="clear"></div>