Member Avatar for death_oclock

I need to have my background image span the entire length of the page without using the BODY element, here's why: I separated the image into left and right sections so even for different resolutions, the left image will always be on the left, and same with the right. Because of this, I have to use two DIVs, each with one part of the image. The problem is, I haven't seen any way to get them to span the entire height of the page. Setting width: 100%; only sets these to 100% of the viewport. Any ideas?

Edit: here is the CSS I currently have (for those specific parts):

.bodyContent .bg_l
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 500px;
  background-image: url('http://img22.imageshack.us/img22/2778/bgl.jpg');
  background-repeat: repeat-y;
}
.bodyContent .bg_r
{
  position: absolute;
  z-index: -1;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 500px;
  background-image: url('http://img15.imageshack.us/img15/5810/bgrf.jpg');
  background-repeat: repeat-y;
}

Edit again: I just realized that in IE (horrible thing that it is) the background won't span any of the page except for a small, ~15px part at the top. If you want to take a look at this, here is the page.

  • 2 Contributors
  • 3 Replies
  • 139 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

0px is an invalid style. Never attach a unit of measure to a 0 value. It invalidates the entire style.

Member Avatar for death_oclock

Not really. Removing the "px" changes nothing. And 0px really doesn't make sense to you? How else should you remove a border inherited from lower down in the cascade?

Member Avatar for MidiMagic

Not really. Removing the "px" changes nothing. And 0px really doesn't make sense to you? How else should you remove a border inherited from lower down in the cascade?

It's not me that does the complaining. it's the browser. Firefox will throw away any style that contains 0 with a unit of measure attached (such as 0px, 0% 0pt). You have to put just the 0, with no unit of measure:

.mystyle [margin: 0;]

Border prefers the "none" attribute, rather than 0, if there is to be no border at all.

But margin and padding do not know the "none" attribute. You have to use 0 with them.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.