Jump to content

unable to get image set as background


jasonc

Recommended Posts

I have an image that I would like placed as a background, the image is black and white and I would like it to repeat downwards, I have tried to copy someone elses code!  I failed.

 

The image file name is  images/D89-grey-c.JPG

 

Is there something I have missed ?

 

<!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" xml:lang="en" lang="en">
<head>
<title> - Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<style type="text/css">
<!--
.bodyContainer {		border: 0px solid brown; float: left;	width: 860px; }
.header { width: 856px; height: 77px; color: #693E38; font-family: Broadway; border: 0px solid #EDB6B6; } /* #693e38 is (105,62,56) */

.menu {					width: 100%; text-align: justify; font-size: 12pt; }
.searchCategoryBox {	border-right: 1px solid #EDB6B6; float: left;	width: 130px;	padding: 3px; font-size: 9pt; }
.resultsBackground { background-image: url('images/D89-grey-c.JPG'); }
.results {				border-top: 1px solid #F0F0F0; border-left: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; float: left;	width: 695px;	margin-left: 10px; padding: 3px; font-size: 9pt; }
.multiItemBoxes {		border: 1px solid #E5E5E5; float: left; width: 155px; height: 180px auto; margin: 4px; padding: 4px; text-align: center; }
.multiItemBoxesImg {	border: 1px solid #F0F0F0; max-width: 130px; max-height: 100px; }

.footerhosttext { color: #000; }
.copyright { float: left; width: 33%; text-align: center; font-size:9pt; line-height: 16px; border: 0px dashed #000; }
.footer {				border-top: 1px solid #EDB6B6; width: 100%; font-size: 12pt; }

.clearfloat {			clear: both; }
.productLineheight {	line-height: 5px; }

hr.smallDivider { color: #EDB6B6; height: 1px; } /* brown = #A52A2A */
.catListLineHeight {	line-height: 12px; }
a.cat { text-decoration: none; }
a.cat:link {	color: grey; }
a.cat:visited {	color: grey; }
a.cat:hover {	color: black; }
a.activeCat:link {	color: blue; text-decoration: none; }
-->
</style>
</head>
<body>
<!-- start of pink -->
<div class="bodyContainer">..		<div class="menu">Home Product About us Contact us</div>	<form name="form1" action="cart.php" method="post">
	<div class="searchCategoryBox">
	  <p>Total items in cart: 0<br />Grand Total: £0.00p<br /><br /><a href="cart.php?mycart=yes">View Your Items</a></p>
	  <hr class="smallDivider" />
	  <p><strong>Search categories</strong><br /><input name="query" type="text" size="12" /><br /><input name="search" type="submit" value="search" /></p>

	  <p>or <strong>Select by category</strong></p>
	  <br class="catListLineHeight" />
	</div>

			<div class="resultsBackground">
			<div class="results">				<a href="cart.php">cart</a><br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
			</div>
			</div>
</form>
<br class="clearfloat" />
</div><!-- end of pink -->

</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/240072-unable-to-get-image-set-as-background/
Share on other sites

so the usefull part of your code is this:

.resultsBackground { background-image: url('images/D89-grey-c.JPG'); }

 

can you remove: <!-- from your code it serves no purpose.

 

besides that is the path to the image ccorrect. in other words is your image file in the folder named images?

is the extension .JPG or .jpg or .jpeg or .JPEG  ?

 

IF you have an online example it would be easier to check this out for us.

try 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" xml:lang="en" lang="en">
<head>
<title> - Welcome to our web site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<style type="text/css">
.bodyContainer {		border: 0px solid brown; float: left;	width: 860px; }
.header { width: 856px; height: 77px; color: #693E38; font-family: Broadway; border: 0px solid #EDB6B6; } /* #693e38 is (105,62,56) */

.menu {					width: 100%; text-align: justify; font-size: 12pt; }
.searchCategoryBox {	border-right: 1px solid #EDB6B6; float: left;	width: 130px;	padding: 3px; font-size: 9pt; }
.resultsBackground { background-image: url('images/D89-grey-c.JPG'); }
.results {				border-top: 1px solid #F0F0F0; border-left: 1px solid #E5E5E5; border-right: 1px solid #E5E5E5; float: left;	width: 695px;	margin-left: 10px; padding: 3px; font-size: 9pt; }
.multiItemBoxes {		border: 1px solid #E5E5E5; float: left; width: 155px; height: 180px auto; margin: 4px; padding: 4px; text-align: center; }
.multiItemBoxesImg {	border: 1px solid #F0F0F0; max-width: 130px; max-height: 100px; }

.footerhosttext { color: #000; }
.copyright { float: left; width: 33%; text-align: center; font-size:9pt; line-height: 16px; border: 0px dashed #000; }
.footer {				border-top: 1px solid #EDB6B6; width: 100%; font-size: 12pt; }

.clearfloat {			clear: both; }
.productLineheight {	line-height: 5px; }

hr.smallDivider { color: #EDB6B6; height: 1px; } /* brown = #A52A2A */
.catListLineHeight {	line-height: 12px; }
a.cat { text-decoration: none; }
a.cat:link {	color: grey; }
a.cat:visited {	color: grey; }
a.cat:hover {	color: black; }
a.activeCat:link {	color: blue; text-decoration: none; }
</style>
</head>
<body>
<!-- start of pink -->
<div class="bodyContainer">..		<div class="menu">Home Product About us Contact us</div>	<form name="form1" action="cart.php" method="post">
	<div class="searchCategoryBox">
	  <p>Total items in cart: 0<br />Grand Total: £0.00p<br /><br /><a href="cart.php?mycart=yes">View Your Items</a></p>
	  <hr class="smallDivider" />
	  <p><strong>Search categories</strong><br /><input name="query" type="text" size="12" /><br /><input name="search" type="submit" value="search" /></p>

	  <p>or <strong>Select by category</strong></p>
	  <br class="catListLineHeight" />
	</div>

			<div class="resultsBackground">
			<div class="results">				<a href="cart.php">cart</a><br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />

					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<br />
					<br />
			</div>
			</div>
</form>
<br class="clearfloat" />
</div><!-- end of pink -->

</body>
</html>

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.