Question

I have a a div#main that has a background image with a vignetting effect.

I want to keep this full image in the center of the page but I would like for a graphic to tile from the far left of the screen to this image, and another graphic to tile from the right side of the image to the far right side of the screen. I’m not concerned with tiling veI realize I could probably ask the designer to have the left and right edges of the image be the same color and texture so I could put the same textured color in the background, but I was trying to see if I can solve it as is.

So I assume I would need for the designer to create two separate graphics. One that tiles and blends in nicely with the left edge of the image, and another graphic that tiles and blends in nicely with the right edge of the image.

How would I set up my div’s and css so that the left tile area knows to start at the far left side of the screen and to stop at the left side of the image and also so the right tile area knows to start at the right edge of the image and continue to the far right side of the screen?

Answer 1

Something like this would work, where bg_tile.jpg is the tile-able background without vignetting, and bg.jpg is the image as posted in your description:

#main_wrapper {
  background: url(/images/bg_tile.jpg) repeat 50% 0;
}

#main {
    width: 960px;
    height: 300px;
    margin: 0 auto;
    background: url(/images/bg.jpg) no-repeat 50% 0 transparent;
}

There is a similar effect on Cultureamp (behind the iPad). Check the css to see it in action.