Php code to operate over css background image

HTML & CSS
1

Hi all, Just joined. I’m fairly new to css but know the basics.

What I am trying to do is to get an image to show on the page by using it as a background image with css . Which I can do in a couple of different ways, and place a chat code over the top of it in the php page.

First is this possible?

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 it 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://www.sitepoint.com/forums/images/banner2edit.png" alt=""></a></li>
                      <li class="second"><a href="#"><img src="http://www.sitepoint.com/forums/images/banner3.png" alt=""></a></li>
                      <li class="third"><img src="http://www.sitepoint.com/forums/images/banner3edit.png" alt=""></li>                     
                      </ul>     
                    </div>                   
                  <div class="clear"></div>

Then for getting it to show up with background image in css: See it 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://www.sitepoint.com/forums/images/banner2edit.png" alt=""></a></li>
                      <li class="second"><a href="#"><img src="http://www.sitepoint.com/forums/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>