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!
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?
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.
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!
Why not?