DH Templates

Repeat background in CSS and/or HTML ?

Hello there, I have an ongoing problem that I downloaded a web template and I want to repeat the background on this template. I am using PageBreeze and visually it looks fine in editor but when I call this in browser it misses the background at all. There are two CSS files are called in HTML as follows: <!-- **** Layout Stylesheet **** --> <link rel="stylesheet" type="text/css" href="style/style104_left.css" /> <!-- **** Colour Scheme Stylesheet **** --> <link rel="stylesheet" type="text/css" href="style/colour2.css" /> I am also copying both CSS files below with a hope that someone will help me find out what I am missing. =============================== STYLE104_LEFT.CSS =============================== html { height:100%; } body { font-family:verdana, arial, sans-serif; font-size:.74em; margin:0; padding:0; background-image: url('C:\Shakir\TTC\s2s1\MoneyV1\style\moneyback.jpg'); background-repeat: repeat; } p { line-height:30px; margin:0; padding:0 0 24px; } h1 { font-family:verdana, tahoma, arial, sans-serif; font-size:176%; font-weight:400; margin:0; } h2 { font-size:100%; text-decoration:underline; font-weight:400; margin:0; padding:0 0 4px; } img { border:0; } .left { float:left; padding:0 8px 0 0; } .right { float:right; padding:0 0 0 8px; } .center { display:block; text-align:center; margin:0 auto; } blockquote { border-top:1px solid; border-bottom:1px solid; margin:20px 0; padding:10px 20px 0; } ul { margin:8px 0 0 14px; padding:0; } ul li { list-style-type:square; margin:0 0 11px; padding:0; } #main { width:761px; margin-left:auto; margin-right:auto; } #links { width:742px; text-align:right; height:22px; padding:9px 0 3px 19px; } #logo { width:759px; height:100px; border-top:1px solid; border-left:1px solid; border-right:1px solid; padding:0; } #logo h1 { font-family:verdana, arial, sans-serif; font-size:150%; font-weight:400; letter-spacing:.3em; padding:38px 0 0 19px; } #content { width:761px; height:auto; text-align:justify; overflow:hidden; padding:0; } #column1 { width:243px; float:left; padding:15px 0 15px 14px; } #column1 h1 { padding:0 0 18px; } #menu,#addlinks { position:relative; width:216px; float:left; height:184px; margin:0 0 15px; padding:8px 0 0; } #menu ul,#addlinks ul { list-style:none; text-align:left; width:216px; margin:0 auto; padding:0; } #menu li,#addlinks li { list-style:none; float:left; margin:0; } #menu li a,#addlinks li a { float:left; height:14px; text-decoration:none; width:194px; border-bottom:1px solid; padding:3px 10px 4px 12px; } #menu h1,#addlinks h1 { padding:0 0 14px 12px; } .sidebaritem { position:relative; text-align:justify; width:190px; float:left; height:244px; min-height:244px; margin:0 0 15px; padding:8px 14px 11px 12px; } .sidebaritem[id] { height:auto; } #column2 { text-align:justify; width:482px; float:right; padding:0 22px 15px 0; } #column2 h1 { border-bottom:2px solid; margin:24px 0 12px; padding:0 0 6px; } .sidebaritem a,#column2 a,.sidebaritem a:hover,#column2 a:hover { text-decoration:none; padding:0; } #footer { float:left; width:761px; text-align:center; height:22px; padding:9px 0 3px; } form { margin-top:0; } div.row { clear:both; width:448px; height:29px; } div.row span.formlabel { float:left; width:150px; text-align:left; } div.row span.forminput { float:right; text-align:right; } div.spacer { clear:both; width:80px; height:22px; } input,textarea { width:259px; font-family:verdana, arial, sans-serif; font-size:100%; border:1px solid; } .submit { font-family:verdana, arial, sans-serif; font-size:100%; border:1px solid; width:70px; height:22px; cursor:pointer; } #links a,#links a:hover,#footer a,#footer a:hover { text-decoration:none; } =============================== COLOR2.CSS =============================== html { height:100%; } body { font-family:verdana, arial, sans-serif; font-size:.74em; margin:0; padding:0; background-image: url('C:\Shakir\TTC\s2s1\MoneyV1\style\moneyback.jpg'); background-repeat: repeat; } blockquote { background-color:#F1F4F5; color:#3E4244; border-color:#D4DBDE; } #links,#links a { background-color:transparent; color:#3E4244; } #links a:hover { background-color:transparent; color:#FFF; } #logo { background:#8D9299 url(logo_2.jpg) no-repeat; color:#3E4244; border-color:#FFF; } #logo h1 { background-color:transparent; color:#FFF; font-size:4em; letter-spacing:-0.1em; margin-top:-35px; } #logo h2 { color:#FFF; font-size:2em; letter-spacing:-0.1em; margin-top:-5px; margin-left:15px; text-decoration:none; } #content,#column1,#column2 { background-color:#FFF; color:#3E4244; } #column2 h1 { color:#3E4244; height:90px; background:#FFF u

Public Comments

1. It worked fine for me when I included all of that CSS in between <style> tags in the html file *and* I used an image of my own. Is the disappearance of your image the only problem? When you say "call it in the browser", are you uploading it to a web site: if so, then the absolute reference to your image file will be incorrect. If you are using IIS or Apache to use your own machine as web server, then it will also be incorrect: better to use relative referencing. Also. you have duplicated html {100%} and body {...}. it's preferred practice (in my book at least) to only use one occurrence: then you only have to make one change if necessary.