I would like to create a custom background in Photoshop for a website. What size should the background image be?

Thanks,

Bob

Hi Bob,
A little more info please... Do you want the bkrnd for the area around your page, for the page itself or both?

To make a bkrnd in Photoshop, have a look at info about how to make a tiled background.
https://www.google.com/#hl=en&sugex … mp;bih=734
Then you can use a small "slice" or tile that will repeat to fill all available space... so your background might only need to be 25 px by 25 px (for example), which will keep the file size tiny.

For your page, after you set the size in the Page Settings, plan a bkrnd to either tile/repeat to fill the space, choose an image large enough to fill the page (not ideal – could slow things down), or use a gradient or solid color. (You can also choose to extend the page bkrnd to fill the entire window.)

So, your bkrnd will be just large enough to create the slice or tile you need to keep the file size as small as possible.

Thanks for responding. I would just like a more interesting background to fill the entire page. My concern is that the background will fill the entire space on different browsers (and still remain a small file).

Thanks for the links - I will check them out.


Regards,

Bob

You may want to shear the image.
Image shearing

Thanks Eric, but what about the actual image size for the background? I don't want any kind of border beyond the background.



Bob

Eric,

Maybe I'm not making myself clear, or I'm too thick to understand your answers. I'm talking about when you first begin to create a website, and the "New Website dialog box appears. Under "Page Title" and "Page ID" is a box to designate the "Website size" (i.e., 1280 X 769, 1024 X 768, etc.). Apparently, this refers to the "Workspace Size" of the content, not the screen resolution.
When I create a new website from a theme, the sizes are all different (under "Page/Website Dimensions/Screen Resolution.") However, when previewed in a browser, the surrounding area is filled with a neutral color, outside of the content. That is what I'm asking about. What is the proper setting for the actual real estate visible in a browser? In other words, how does one make the Photoshop background large enough to completely fill the area surrounding the content?
Do you know what I'm trying to say? What is the relationship between the "Workspace Size" and the "Screen Resolution", and what are the optimal settings to insure proper display on different browsers?
I really appreciate the help. Sorry if I'm just not getting it!


Regards,

Bob

Web page size has nothing to do with it. The image will be repeated to fill a users screen. If I'm on a 24 inch monitor I'll see more image. If I'm on a 13.5 inch I might not see much at all but then that depends on the width of your page in VSD. I would set a background fill image and see what you like when you preview it.

OK, thanks. I appreciate the help!



Regards,

Bob

Robert,
There's no way to determine a size for the area around the website itself. It depends on the computer/device being used to view the site as well as whether the site is viewed full-screen or not. Even if you used a huge image, someone out there will have an even bigger screen – you can't plan for one static screen size because that doesn't exist. That's why you want a pattern (or color) that will repeat to fill any amount of space. Something no bigger than your avatar is able to repeat horizontally & vertically (usually from the top-left corner) to fill whatever space is shown.

If you use a seamless tile/pattern, you won't see where all those little squares join together, it will look like one never-ending pattern. This site uses one of Coffee Cup's backgrounds: http://babyflipple.com/
The tile is only around 50px square.

Once you try it, all will become clear