Link to home
Start Free TrialLog in
Avatar of cnl83
cnl83Flag for United States of America

asked on

CSS background does not work when I include header.php

I have index.php that has an attached stylesheet. The css background works when its simply attached. It does not work when I include my php header.

Header.php is basically just a basic html header.

My CSS
body
{ 
background-image:url('images/bg.gif');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center; 
}

Open in new window

My Index.php
<?php include("header.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />

Open in new window


Should my header also have an attached style sheet?
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

what is in your header.php and how are you including it?

May be header.php styles are overriding the original ones in index.php
Avatar of wwwdeveloper2
wwwdeveloper2

Your header.php should be overriding your css file, since the header file is called before your css file.  The browser will listen to the last instructions it receives.

What I found interesting is that you said your hearder file was just a basic html page.  That caught my attention because you are calling it before your start your <html>

Do this.

1) make sure you header file doesn't have any <!DOCTYPE, <head> or <body> information in it.  Just make sure it has your html code you would typically see between the opening <body> and closing </body> tags.

2) In your php file, call your header file like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />

//close your head and open a body
</head>
<body>
//include your html header - make sure it doesn't head, html, or body tags since they are already declared here.  also make sure you are not calling other styles that are named the same as what you have in the css file linked above

<?php include("header.php"); ?>

//rest of your php/html page for index.php


//now close your body and html

</body>
</html>

Open in new window

Sorry for re-post - I wish we could edit!  The first line in my previous suggestion should have read:

Your header.php should NOT be overriding your css file, since the header file is called before your css file.  The browser will listen to the last instructions it receives.
Avatar of cnl83

ASKER

I tried the above and it still does not work.

http://www.actionfx.net/rootandfruit/
http://www.actionfx.net/rootandfruit/header.php

Here is header code
<center>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="98" height="259">&nbsp;</td>
    <td width="990" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/headerPNG.png">
      <!--DWLayoutTable-->
      <tr>
        <td width="990" height="259">&nbsp;</td>
        </tr>
    </table></td>
    <td width="112">&nbsp;</td>
  </tr>
  <tr>
    <td height="39">&nbsp;</td>
    <td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td width="990" height="39" valign="top"><div align="center"><img src="images/nav.gif" width="990" height="39" border="0" usemap="#Map" /></div></td>
        </tr>
      
    </table></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="827">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

<map name="Map" id="Map"><area shape="rect" coords="13,1,168,38" href="index.php" />
<area shape="rect" coords="169,1,315,36" href="about.php" />
<area shape="rect" coords="315,-13,469,35" href="products.php" />
<area shape="rect" coords="469,3,625,35" href="benefits.php" />
<area shape="rect" coords="626,3,786,35" href="locations.php" />
<area shape="rect" coords="788,0,976,34" href="contactus.php" />
</map>

Open in new window

Hi I think you want to get result as your first link Now here is your code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Root &amp; Fruit Juice</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include "header.php";?>
<map name="Map" id="Map"><area shape="rect" coords="13,1,168,38" href="index.php" />
<area shape="rect" coords="169,1,315,36" href="about.php" />
<area shape="rect" coords="315,-13,469,35" href="products.php" />
<area shape="rect" coords="469,3,625,35" href="benefits.php" />
<area shape="rect" coords="626,3,786,35" href="locations.php" />
<area shape="rect" coords="788,0,976,34" href="contactus.php" />
</map></body>
</html>
<center>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="1200" height="1125">&nbsp;</td>
  </tr>
</table>

</body>
</html>

Open in new window

Sorry There was a mistake again like </body> and </html> have been closed two times so now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Root &amp; Fruit Juice</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include "header.php";?>
<map name="Map" id="Map"><area shape="rect" coords="13,1,168,38" href="index.php" />
<area shape="rect" coords="169,1,315,36" href="about.php" />
<area shape="rect" coords="315,-13,469,35" href="products.php" />
<area shape="rect" coords="469,3,625,35" href="benefits.php" />
<area shape="rect" coords="626,3,786,35" href="locations.php" />
<area shape="rect" coords="788,0,976,34" href="contactus.php" />
</map>
<table width="1200" border="0" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="1200" height="1125">&nbsp;</td>
  </tr>
</table>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of wwwdeveloper2
wwwdeveloper2

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial