What size of a background picture for website?

[Delicieuxz]

I posted the quoted message on a couple of Photoshop forums. I've since edited out the 1900x1200 part, but I had that in there with the thought that having a full-sized image would allow me to downsize to any other resolution needed. I've since started to think that's not a good idea. What's a good size of background picture to use for a website, or how should I accomplish this?

When viewing images in IE, there's an option to have it resize large images for you to fit the browser. Is there a way to have a website load the background picture fitted to browser? Also, where should I look to have a top-quality image created?

Hi, and welcome to this thread.

I'm looking to have a 1900x1200 picture be constructed for use as background on a personal website.

The image needs to consist of an aesthetic, colourful mid-dawn/mid-sunset starry backdrop, with fractal overlay and silhouette of a couple palms in the lower right-hand corner.

- Of the palm silhouette, here is a rough sketch (minus treetops): http://i29.tinypic.com/2cohgyd.png
The silhouette will probably be mostly black, unless a designer presents a better look, and I am very open to ideas. It is meant to be stylized to a faint degree, and I am thinking that details such as the lines on the palm's trunk could appear as gold against the black, or that they could use multi-coloured using a dark spectrum. The same applies to the white slits on the tropical plant leaf in the picture. The jagged grass chunks might also work as darkly multi-coloured, with their colours fading to black the further away from their tips that you go.
Actual proportions of the silhouette to screen size are not represented in this drawing.

- I'm looking for richness in colour of the background's gradient, and which colours I'd specifically like to be included will have to be discussed, yet there is also room for the designer to try things they personally like, as a few different gradient backgrounds may be used to produce interchangeable versions of the final scene.
A starting reference point for colour richness could be considered in these pictures, which I've chosen as examples:

http://www.mikebonnell.com/html/0072/0003_1024.html
http://www.mikebonnell.com/html/0072/0004_1024.html


- I have star brushes to provide, though you may also use your own resources, subject to my looks-based discretion. The density of the stars may be played around with, as can the inclusion of Milky Way-type clusters of stars. This all depends on what appears the most aesthetic.

- I would like a fractal image overlayed to appear as though it were coming in waves and emanating from the light-source, which would be behind the palm silhouette. An example of what I mean can bee seen in this mock-up I made: http://i40.tinypic.com/15s6hy9.png


If you don't know how to create a fractal image but have skills for the other required areas of this picture, then don't let that stop you from contacting me. Likewise, if you can create a gorgeous palm silhouette for the scene but do not want to take on the responsibility for the sky and fractal parts, then, by all means, please still consider contacting me. And, if you think you just have a killer fractal to be used, well, the same applies.

I suggest that whoever's interested submit a small example (320x240, or whatever you wish) of a/some sky gradients with perhaps a few stars, as well as whatever other touches you choose, so that we both can enter into the project confident that we're not caught up in two entirely different concepts.

Any personal touches which add a sense of wonder, mild psychedelia, and beauty in general are fully welcome, though they will have to be evaluated.


Payment will be exchanged for the final .PSD file(s) and should be negotiated based on what you offer to provide: whether it's one element of the picture or the whole, as well as how refined a job you'd like to provide. I am open to hearing what the community here considers to be a fair price for a quality job, and if I'm really impressed, there may be a bonus. You can reply to me in this thread, or via email: delicieuxz**@**hotmail**.**com - just remove the asterisks.

Thanks for taking a look!

[peoplessi]

Usually you construct the "background" of multiple layers of pictures. So you don't have 1 big picture. Having some scalability in the design is good.

But, that would need a full package, the whole layout/groundwork done to work properly.

[Delicieuxz]

Thanks. I guess that if I have all the elements as individual layers in a PSD file I'll be able to scale them to something that works.

[Amakou]

I usually like to have something that's about 2000x4, then repeated vertically, it scales properly on all machines, and depending on how you make it, will look great. I usually have my content in the middle with a gradient leading into it and leading out. It also loads faster than a normal image, given the size. But, if you're looking for having a specific image as a background, this method doesn't work as well.

~Amakou~

[Delicieuxz]

When it comes to the gradient, that could be a problem. If a browser can just cut off parts of the picture without creating the scroll-bars in an attempt to show it all, this could be avoided. With just the stars, the method you described could work very well.
Do you have some examples/websites you can show where you've applied this method?

[Amakou]

Originally Posted by Delicieuxz

When it comes to the gradient, that could be a problem. If a browser can just cut off parts of the picture without creating the scroll-bars in an attempt to show it all, this could be avoided. With just the stars, the method you described could work very well.
Do you have some examples/websites you can show where you've applied this method?

Unfortunately I lost a lot of my old website designs when I formatted my harddrive (overlooked the folder to back up). So the only example I have where I used the background is my MySpace. Sad, I know, but it shows off the background pretty well, haha. The black part in the middle is part of the background, where the content goes above, although you could make it whatever color you desire. Like I said, the main advantage of this method is the loading time, since I'm sure you know how much longer it takes to load an actual image. I'll look to see if I still have a copy of my old site design somewhere.

~Amakou~

[Intra Dev]

You Can add background image by add in, this will make it full screen.

<body style="background-image="image link here">
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

[Delicieuxz]

Cool stuff!