jasonc Posted June 22, 2011 Share Posted June 22, 2011 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> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted June 22, 2011 Share Posted June 22, 2011 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. Quote Link to comment Share on other sites More sharing options...
ryanfilard Posted June 24, 2011 Share Posted June 24, 2011 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.