So I was just about to post this as a question, because it was bugging me for a couple hours now - but just as I was about to I came up with an idea, and it seems like it worked:
I want a simple background. The image is wider than tall, about 3:1. So I wanted the height to be at 100% and whatever hung off left/right was fine. I also needed it centered.. I STILL THINK THERE HAS TO BE AN EASIER WAY TO DO THIS THOUGH?!
But what I did was this:
cut the image down the middle and split it into 2 images. Then, first thing I put into the body:
<img src="images/background2.jpg" alt="background image" id="bg2" /> <!-- images with z-index=0
<img src="images/background2.jpg" alt="background image" id="bg3" />
[body of the website] <! body tags with z-index=1
right: 50%; <!-- 1st image I push halfway from the right
left: 50%; <!-- 2nd image I push halfway from the left
And then the images meet in the middle and everyone's happy..
But come on, there is an easier way, right?
well - 1 problem at least....
I get a horizontal scroll-bar at the bottom of the browser - it allows me to see what's cutoff from the right-image.. Any ideas to fix this? Tried setting overflow to hidden + other values, no avail.
sorry forum, too slow. Threw the images into a container, which has overflow set to hidden. That solved it.
I rule. maybe next time forum.