technique for fading out edges of background

[cutcopypaste]

i have a tiling image making up the background of the page (about 80x80 tiling vertically and horizontally.
the client has requested that the background fade out.. probably to black at each side so that it looks a bit better on really wide resolutions (the page itself is about 800 px wide, this would start after that).
my problem is trying to figure out the best way to do this without needing a very wide image.
I tried darkening the whole image and then putting a mostly transparent white box in the middle, but it mutes the background more than i'd like.
best thing would likely be putting a dark overlay over the tiled background image, but then I have to make the body background black and have a reaally wide div for the bg.. and I worry about horizontal scrollbars.

or i dunno. should i just suck it up and make a big honkin image

[Erik J]

I'm not sure why your try is not working.

A background image can not induce a scrollbar, only the container holding it can. That container could be the body/html or a viewport filling block behind the content.

You also can use both the html and the body with different backgrounds sets.

[Paul O'B]

Hi,

I'd just use a wide but small height repeating image on the body background that fades out to black.

body{
    background:#000 url(images/bghatch2.png) repeat-y 50% 0;
}

Roughly like this.

The image in the above is only 2k so you can make it wider if necessary.

[cutcopypaste]

Hi,

I'd just use a wide but small height repeating image on the body bcakground that fades out to black.

body{
    background:#000 url(images/bghatch2.png) repeat-y 50% 0;
}

Roughly like this.

The image in the above is only 2k so yu can make it wider if necessary.

wouldn't that image have to be potentially as wide as any monitor though? because outside the edges of the image it would shift back to the tiling background.. that was my main concern. but i guess it's fair not to support monitors with gargantuan resolutions.
the difference is on mine i wanted a tiling background image, with the black borders overlaid on top, just because my background image is 223 px tall (i checked and i definitely mis-guessed in the first post), so to have to have the image 223x1600 seemed excessive, when i could have one 223x223 and one 1x1600

[Paul O'B]

wouldn't that image have to be potentially as wide as any monitor though? because outside the edges of the image it would shift back to the tiling background.

No the image I used was only 1170px wide and was only 2k in size. The image is centered on the body and only repeated vertically. The image fades into black at the edges and the body background colour takes over seamlessly where the image finishes. It will fit on any size monitor no matter how big with no problem.

the difference is on mine i wanted a tiling background image,

The example I gave is a tiling image with a matching crosshatch fade.

with the black borders overlaid on top, just because my background image is 223 px tall (i checked and i definitely mis-guessed in the first post), so to have to have the image 223x1600 seemed excessive, when i could have one 223x223 and one 1x1600

If the image is 223px tall then that's quite a big chunk to repeat and I can't think of many patterns that need to be repeated at that size. I'm still guessing that the one image approach as in my example will still be a smaller size than the three images you would need and the latency needed for 3 image requests.

I'd need to see an example of the image that you have and the effect that you want to create. Can you upload the image or the site so far so we can see what you are trying to do?

[cutcopypaste]

it's a damask pattern. i made it smaller actually so it's about half that.. but still pretty large to repeat.

i didn't think about the number of http requests.. is there a way to get a rough picture of how bad multiple http requests are? like.. does it add a certain amount of virtual size to a page to figure out when having 2 smaller images beats 1 huge one?

here is a (scaled down) preview of what the site wants to look like.. sans text or headings. it uses mostly transparent pngs at the behest of the client

[Paul O'B]

Hi,

I don't see a problem in doing what you need with one image.

I've made another demo that uses a 1600px x 223px png image which is the size you said you'd need and it only runs out at 6k. There's no way you can make that smaller using 3 images and indeed the transparent images you wanted to overlay the background with will likely run out at many times that size.

I think you should cut the background out now and see how it goes and then we can see what issues you are having. It took me less that 5 minutes to make that image (it shows I know) and upload it so you should really start creating it and then you can see where the problems are.

[cutcopypaste]

mine's about 20 k as a jpg.. i guess that isn't too bad

[Paul O'B]

No, That's not too bad You can probably optimise it more with some online tools.

Another way to do it would be to use a repeating graphic on the body and then place a very wide png overlay on top in a 100% high outer element.

This example use the high quality repeating graphic but is only 8k. The transparent overlay is 2400px wide (suitably for almost all monitors) but is less that half a k.

However you would lose the effect in IE6 as it doesn't understand transparency.

I would go with the single image and try and optimise it down a little smaller.

[cutcopypaste]

thanks a lot! I think just one tiling image is probably better, especially because I already have quite a few random container divs. Next hurdle is going to be making the footer sticky with the border divs surrounding it

[Paul O'B]

Next hurdle is going to be making the footer sticky with the border divs surrounding it

Use the sticky footer from the CSS faq as its the only one that works everywhere but use the negative bottom margin technique for your design. Note that you can only have one outer that is able to be full height so plan carefully and everything must be done on this element.

I would take a repeating slice from your images that includes both side borders and those vertical stripes. Apply those the the outer in the sticky footer and you will have a background that stretches from top to bottom.

Next create the header section with another background image to sit on top of the other background and create the top part of the design.

The sticky footer would then be dragged upwards with a negative bottom margin on #outer and will sit inside the borders. This method will need a clearer to hold the space open unlike the negative top margin technique mentioned in the faq.