2 Replies - 1807 Views - Last Post: 04 March 2012 - 11:26 PM

#1 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Getting div background to reach to edges of browser window

Posted 04 March 2012 - 11:15 PM

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;


Is This A Good Question/Topic? 0
  • +

Replies To: Getting div background to reach to edges of browser window

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4187
  • View blog
  • Posts: 11,845
  • Joined: 18-April 07

Re: Getting div background to reach to edges of browser window

Posted 04 March 2012 - 11:22 PM

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

Was This Post Helpful? 1
  • +
  • -

#3 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

Re: Getting div background to reach to edges of browser window

Posted 04 March 2012 - 11:26 PM

OH perfect! Thank you so much for the quick reply :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1