Page 1 of 1

link background image

Posted: Thu Dec 04, 2008 10:11 am
by gunfodder
Here's my problem. In IE and Opera the image and the wording links just fine, but with firefox it does not. Since i'm still a newb to css and php I was hoping someone could see if my coding is ok.
If it is, then I will build in specifics for firefox to display properly. I just recently learned how to do a basic "if-then" statement and feel FREE!
Thanks.

in my stylesheet..
#header {
background: url(../images/header.png) top center no-repeat;
background-image: url(../images/picture.png);
width: 746px;
height: 106px;
margin: 0px 0px 10px 0px;
padding: 60px 0px 0px 20px;
color: blue;
font-size: 50px;
text-align: ;
}
#headerie {
background: url(../images/header.png) top center no-repeat;
background-image: url(../images/picture2.png);
width: 746px;
height: 106px;
margin: 0px 0px 10px 0px;
padding: 60px 0px 0px 20px;
color: blue;
font-size: 50px;
text-align: ;
}

code in webpage...
<?php echo '<center><a href="../">' ?>

<?php
$membership = $_SERVER['HTTP_USER_AGENT'] . "\n\n";

if ( strstr( $membership, "MSIE 6.0" ) )
{echo'<div id="headerie" style="width: 746px; height: 125px">
<center>
<br><br>

';}
else if ( strstr( $membership,"Firefox/3.0" ) )
{echo'<div id="header" style="width: 746px; height: 200px">
<center>
<br><br>
';}

else
{echo'<div id="header" style="width: 746px; height: 200px">
<center>
<br>
<br>
';}
?><font size=+3>Yeah webpage</font></center></a></td>

Re: link background image

Posted: Thu Dec 04, 2008 10:56 am
by mintedjo
Hello.
I'm not sure why your code isn't working :-( BUT...
In your css you declare all the background properties at once, which is fine.
But then you also use background-image to set the background image.

Code: Select all

background: url(../images/header.png) top center no-repeat;
background-image: url(../images/picture.png);
The first line sets an image as the background and positions it without repeating it.
The second line changes the background image to picture.png. So the 'url(../images/header.png)' shouldnt actually affect your page at all as the image is replaced in the following line.