Jump to content

Help with DIV background


Recommended Posts

For some reason i cannot get a background image to display in my hearder DIV with an external CSS file.I have resolved the issue by using the style attribute exactly the same way but inside my html document. I would however liek to keep this in my CSS file externally. Here is the code:

<?xml version="1.0" encoding="utf-8"?><!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>Site Title Here</title>	<meta http-equiv="content-type" content="text/html;charset=utf-8" />	<meta http-equiv="content-style-type" content="text/css" />             <meta http-equiv="content-language" content="en">             <meta name="robots" content="index,follow">             <meta name="description" content="Site description here">             <meta name="keywords" content="Keywords here">             <link href="CSS/default.css" rel="stylesheet" type="text/css"></head><body><div id="contentwrapper">  <div class="sidebar">             sidebar  </div>  <div id="main">    [b]<div id="banner" style="background-image: url('banner.jpg'); background-repeat: repeat-x;>[/b]                 </div>               </div>  <div class="sidebar">             sidebar  </div>        </div>     </body></html>

and this is the external CSS file:

body {         margin: 0px;         background-color: #f0f0f0;         font-family: verdana; sans-serif;         font-size: 12px;         font-style: none;        }#contentwrapper {         margin: 0px;         width: 100%;         height: 100%;                         }.sidebar {         width: 10%;         height: 100%;         float: left;             }#main {         width: 80%;         height: 100%;         float: left;         background-color: #ffffff;         }#banner {         width: 100%;         height: 50px;         float: left;         background-color: #000000;         background-image: url('banner.jpg');         background-repeat: repeat-x;              }

thanks in advance

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...