[Eludiac]

Hey guys,

I am a pretty novice web designer, but I am trying to use a background image set with repeat-x to act as the header background, but the image doesn't reach the edge of the browser window. this leaves a small border around the div element on the left, top, and right of the image. my intention was to have the image be flush with the top and sides of the browser window. What is the proper way to achieve this? is there a different method of making a css background? Thanks for any help at all!

Here's my CSS so far:

background-image: url(images/Woodtop.jpg);
	background-repeat: repeat-x;
	height: 1in;
	width: 100%;
	z-index: 1;
	overflow: visible;
	background-position: 0px 0px;
	position: relative;
	margin: 0px;
	padding: 0px;

[Martyr2]

Did you set the body to have zero margins?

body {
  margin: 0px;
}

If you didn't remove the margins the border you are seeing is not from the div but the body tag the div is in. You can also style the body tag with a background.

body {
   background: url('someimage.gif') repeat-x top left;
}

This post has been edited by Martyr2: 04 March 2012 - 11:23 PM

[Eludiac]

OH perfect! Thank you so much for the quick reply