I have no idea but I seem to not be able to link this picture to a hyperlink. Basically, I have an image and when you click on it, it will go to that directed hyperlink. For some reason, the linking isn't working and only the "bob" is showing and allowing the hyperlinking.

(PHP)
<div class="header">
        
    <h1><a href="la">
         bob</a>
    </h1>
</div>

(CSS)
.header {
    background: url(images/element_01.jpg);
    }

I also want to hide the "bob" text too. Thanks in advance.

The background area behind "bob" will only display whatever space "bob" is taking up. The background image doesn't "force" the width and height of the area. You must specify that.

You could set the link (<a href...>) to a width and height equal to the background image. You also have to set that link to display block then.

.header h1 a { width:100px; height:100px; display:block; }

(sub 100px for the background image width and height of course.)

Thanks again but I still can't get the "bob" to hide but the picture is clickable .

(PHP)
<div class="header">
        
    <h1><a href="la">
         bob</a>
    </h1>
</div>

(CSS)
.header {
    background: url(images/element_01.jpg);
    }
.header h1 a { 
    width:300px; 
    height:300px; 
    display:block; 
    }

just delete the word bob

Or to keep the text "there" in the code try:

.header h1 a { text-indent:-9999px; }

Originally Posted by chrishirst

just delete the word bob

Thanks a lot. Got it fixed now. I was using racer x's response earlier when I did some research but I didn't like how the text was pushed to the left like that but anyways, I got it to work.