CSS Forum

**fancymoustache** · 09-02-2005, 01:42 PM

The only background attribute that seems to work with me is just the background-color attribute. Shouldn't background-image work, too?

CSS

Code:

body {
	cursor:default;
	background:#FFFFFF;
}

#header_background {
	width:780px;
	height:180px;
	margin:0px auto 0px auto;
	background-image:url(images/header.jpg);
	background-repeat:no-repeat;
	background-position:5px;
	background-color:#996633;
}

HTML

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" media="all" href="design/style.css" />
<title>
{title}
</title>
</head>
<body>
  <div id="header_background"></div>
</body>
</html>

**chrishirst** · 09-02-2005, 01:53 PM

it would work provided that images/ was a sub-folder of design/ but as it probably isn't it won't

**fancymoustache** · 09-02-2005, 02:06 PM

I tried background-image:url(/images/header.jpg); to test that, but I always forget that i need ../, rather than just /

thanks for your help, Chris

**mikeroq** · 09-02-2005, 03:32 PM

you should actully use

Code:

#header_background {
	width:780px;
	height:180px;
	margin:0px auto 0px auto;
	background: url(images/header.jpg) no-repeat 5px 0px 0px 0px;
	}

if you have a color, and an image, then the image will overide the color so there is no point to have the color

**fancymoustache** · 09-02-2005, 03:45 PM

1) I was just using the many different background attributes, just for testing purposes. I have since changed them into one background:;

2) My background is larger than the image. Thats why I don't have it repeat, and I have it moved over 5px and down 5px. The image is 770px, so I left, top and right border of 5px, with some space at the bottom.

Thanks, though.