Image has a weird icon and outline over it

I need a big banner at the top of the screen going from end to end. It has to be a link and on the banner is an image. I have all that set up and working. However, around it all is a gray box and in the top left corner is the icon that is displayed when no image is found. How do I remove the box and the icon?

header.php

<body <?php body_class(); ?>>

<a class="vcuLink" href="http://www.vcu.edu/" >
    <div id="topBanner" class="vcuBanner">
        <img class="vcuLogo" src="vcu.png" width="910" height="59">
    </div>
</a>

<div id="page" class="site">
    <div class="site-inner">

I do not think showing more is necessary.

style.css

.vcuBanner {
    position: relative;
    background-color: black;
    z-index: 100;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 62px;
    top=0;
}

.vcuLogo {
    position: relative;
    background:url(vcu.png)no-repeat center;
    height: inherit;
    width: inherit;
    z-index: 101;
}

EDITS: More information and a screen shot.

When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing. However, when the img tag is there so is the weird icon and outline, leading me to believe that the img tag is the culprit.

Screenshot:

In the VCU banner at the very top, you can see what I am talking about. In Internet Explorer, the icon at the top left is an X button instead and there is no outline.

Solution

There are many possible causes for this, so I’ll try an educated guess at what seems the most likely cause.

I don’t know where your files are located relative to one another, but the way your markup and CSS here is written, the file vcu.png should be in the same folder as the PHP file where you’re displaying it (presumably index.php, given the URL in your address bar) for the <img> tag to work. Similarly, it must be in the same folder as the CSS file for the background declaration to work.

Since the position of the <img> tag itself is not specified in your CSS, it should show up in the top left corner of the container. The background image is centred, so it should show up in the centre. Given that there is an image in the centre and a missing image icon on the left, it would seem it is the HTML <img> tag that points to a nonexistent file. That in turn means that the PNG file is in the same folder as the CSS file, but in a different folder than the PHP file. Perhaps the CSS and PNG files are in a subfolder called style or something like that?

When either the background:url line in style.css or the img tag in header.php is deleted, the image in the banner stops showing.

This makes sense. Since the CSS-defined background is declared on the image tag (not the containing <a> or <div>), removing the tag from the HTML markup naturally also removes the background image. Conversely, since the HTML tag is pointing to an incorrect path, having the tag there also means there will be a missing image icon.

You can solve this in two simple ways:

Figure out where the image is located relative to your index.php file, and make sure you point to the correct location (perhaps src="style/vcu.png" or something like that). Then style the <img> tag with something like margin: 2px auto; to centre the image and give it a couple of pixels of space at the top and bottom, and get rid of the background declaration in your CSS.
Remove the <img> tag from your HTML altogether, replace it with   (to make the containing <a> non-empty), and style the container to be display: block.

The first yields more semantic code and would be my preference; but both should render the same in regular browsers. Removing the <img> tag also removes its alt attribute, however, so users relying on text-to-speech systems will have no way of knowing what that link actually does, since the only meaningful content it will contain is a non-breaking space.