Best way to create this background graphic? advice needed

Hi Folks,

I'd like to have a background image as below. Problem is its really big and takes a while to load.

I've just set it to the background of the body tag.

http://www.vhairandbeauty.co.uk/wp-c...s/1500x900.jpg

Can anyone please tell me the most efficient way to create a background graphic like this? and which screen resolution should I design it for?

Many thanks

That image looks like it will tile, so I'd suggest that you cut out a square section of it that can repeat infinitely, and apply it to the body element.. Then, on the main content div, place as a background image a semi-transparent, circular gradient image from white in the center to transparent on the outside that will give the light center effect.

Thanks for the replies.

Could you please tell me what type I need for the image, will jpeg do it?

Thanks again

Jpeg for the wallpaper and a png for the shadow would be fine.

Thanks again for you reply.

Just to confirm, what type of PNG is it, 8, 24 or 32?

Does the canvas need to be trans?

And is it alpha or index trans?

Thanks again

Quote:

---

Originally Posted by mattastic

Just to confirm, what type of PNG is it, 8, 24 or 32?

---

Sometimes 8 is fine, but 24 will give you better quality—especially in a gradient. I'd say only go to 32 if you really have to. I've never used it. With all these questions, just experiment around a bit and see what looks best, and weigh that against file size. The simpler the better.

You know, this would be a perfect job for progressive enhancement.

If you create a repeating tile AND a vignette, you would end up making a MUCH heavier D/L.

1) there would bve two HTTP request
2) You would still have to make ONE large file
3) that large file would have to support multiple layers or transparency, so its' going to have to be a PNG 24 or 32 in other words HUGE FILE

:/

I would opt for a little math and a JPG.

1) you can use as is and fade the bottom out to a solid color ( or not, if this is the bg to your page, you could use background-position fixed, so that the content would scroll but not the image)

or

2) Use as is + add a repeating jpg ( making sure the vignette and tyles end at a concurrent point .. this mean MATH! and yes two http request )


or

3) a JPG and CSS3 radial gradient as a second element bg ( for browsers that support it). even experiment with background-size property of the second ( vignette) bg so that it adjust (or doesn't) to fluid layouts. With CSS3 you can also mix and match from my suggestions above for optimal results

There seems to be a repetition of tiles in the photo. You might just need to focus on one tile and repeat it a number of times depending on your size preference.

I would just use illustrator for everything. If your just putting it on top of a background, there's no reason why you can't use illustrator. Then your logo stays in a vector format, which I always think is best.

Trace it in illustrator, create a tiled image [ patch work if you will ] then export your gif, png, jpeg...what ever you prefer!