Forums

creativeastro

Hie

My background images are not appearing. This is my code for the green part where a background image is supposed to be. I have just put different colours in the divs for now to differentiate them http://www.creativeastro.com/MSHeating/index.php

#main-pic{width:100%;
height:620px;
background-image:url(images/bg2.jpg);
background-repeat:repeat-x;
}

Under the big img with the woman touching the boiler there are 3 divs and in each there is supposed to be background imgs which are green and the text that is there comes on top but those images are not appearing. They did at some point but not anymore.
This is the code for them below:

#green-boxes{width:960px;
margin:0 auto;}
#green1{background-image:url(images/green1.jpg);
background-repeat:repeat-x;
float:left;
margin-left:13px;
width:234px;
height:245px;}

#green2{background-image:url(images/green2.jpg);
background-repeat:repeat-x;
float:left;
width:243px;height:245px;}

#green3{background-image:url(images/green3.jpg);
background-repeat:repeat-x;
width:229px;height:245px;
float:left;
margin-right:10px;}

The html is

<!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>Welcome to MS HEATING AND PLUMBING</title>
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/heating.css\" />

<link rel='stylesheet' type='text/css' href='css/quickmenu_styles.css'/>
</head>

<body>


<?php include(\"includes/header.php\"); ?>

<div id=\"main-pic\"><div id=\"pic\"><img src=\"images/main-image.png\" alt=\"MS Heating\" class=\"lady\" /><a href=\"bosch.php\"><img src=\"images/boiler.png\" alt=\"Bosch Credited Installer\" class=\"boiler\" /></a>

<div id=\"green-boxes\"> 

<div id=\"green1\"><a href=\"services.php\"><img src=\"images/services.png\" alt=\"Our Services\" class=\"services\" /></a>
<ul class=\"greenlist\">
<li>Boiler Replacements</li>
<li>Under Floor Heating</li>
<li>Power Flushing</li>
<li>Central Heating Installations</li>
<li>Boiler Servicing</li>
</ul>
</div>  
  
<div id=\"green2\"><a href=\"repairs.php\"><img src=\"images/repairs.png\" alt=\"Maintenance and Repairs\" class=\"repairs\"/></a><p>Boiler Maintenance is very important etc etc.</p><a href=\"repairs.php\"><img src=\"images/learn-more.png\" alt=\"Learn More\" class=\"more\" /></a></div>

<div id=\"green3\"><a href=\"feedback.php\"><img src=\"images/customer-icon.png\" class=\"customer\" alt=\"get a quote\" /></a><p>Find out what our clients say about our work.</p><a href=\"feedback.php\"><img src=\"images/feedback.png\" alt=\"Read Feed Back\" class=\"more\" /></a></div> 


<div id=\"quote\"><a href=\"quote.php\"><img src=\"images/quote.png\" alt=\"Get a quote\" /></a></div>
</div>
</div>
</div>
<?php include(\"includes/footer.php\"); ?>




</body>
</html>

I have a similar problems with the other pages but maybe if I sort out the main page I might be able to sort the other problems out, if not I will ask for help again.

Thank you for reading, I hope you can help.

apostrophe

Link not working.

EDIT:
Correct link is http://www.creativeastro.com/MSHeating/index.php

apostrophe

Your images aren't showing because the paths are incorrect. Should be:

#main-pic{width:100%;
height:620px;
background-image:url(../images/bg2.jpg);
background-repeat:repeat-x;
}

creativeastro

Wow thanks you are a genius

Yes that worked. It does help to have fresh eyes look at the code.

Do you have any ideas why some images have worked with the path I had originally?

apostrophe

Do you have any ideas why some images have worked with the path I had originally?

The only way that path could possibly work would be if the stylesheet was at the root level ie. not in a directory.

creativeastro

Okay thanks a lot, actually I noticed the other images worked because they were in the html not as a background via css.

treehouse : what would you like to learn today?

Forums

Background Images Not appearing