CSS background problems

[chaseries]

Hi all,

I’m building a site that’s set to have two backgrounds and I’m not sure exactly how to do it (nor can I find much information; I always ask questions as a last resort). Here’s a picture of the first page: http://imgur.com/A4rIk (the red lines are the intended viewport/the width of the wrap div). The problem is this:

The page is set to have a plain white background, e.g.

body{

background-color: #fff;

}

On top of that I’d like to set a 1900px wide image (those weird shapes in the link i sent) that aligns so that the center of the image is in the center of my wrap div or the main page content and the sides extend outward without inducing a scroll bar to appear at the bottom of the page. The other stipulation is that I have to do it using a CSS background; I can’t use an image tag. And it must work across browsers.

The simplest solution, of course, is just to change the image so it already has a white background and set the body background to that image, but because of size restraints, I can’t do that either.

This may be a novice question but I’ve never really done anything like this before. Thoughts? Thanks in advance for reading this. I just can’t seem to do it!

[wolfcry911]

The simplest solution, of course, is just to change the image so it already has a white background and set the body background to that image, but because of size restraints, I can’t do that either.
Why not?

[chaseries]

It’s actually going to be a single-page scrolling site with parallax effects on it, so it’s going to load all at once, six or seven times bigger than the first “plate” that I posted. I suppose I could do it, but it worries me because I feel not everyone’s machine or connection are going to handle that well to begin with. So I’m trying to minimize size everywhere, basically.

[chaseries]

Rolling for more help…anyone? :D

[venicepop]

make the shapes you want into images and position them maybe?

[Author]

Posts