What Is The Best Size To Make A Background In Photoshop?

lonebyrd

Oct 5 2006, 05:52 AM

I'm using Photoshop 7 and I want to make my own background. I'm learning how to do some neat things with it now. My question is, once I open up a new file, what size do I make it so that every person who visits my site will be able to view it correctly? I know people don't all have the same screen resolution, so what do I do? I want to make a banner too and am having the same dilema. Do I just make it one size, like 800x600 then have to do some kind of code to make sure it looks good for everyone? If so, can someone please tell me how it goes?

Comment/Reply (w/o sign-up)

foolakadugie

Oct 5 2006, 06:51 AM

QUOTE(lonebyrd @ Oct 4 2006, 10:52 PM)

I'm using Photoshop 7 and I want to make my own background. I'm learning how to do some neat things with it now. My question is, once I open up a new file, what size do I make it so that every person who visits my site will be able to view it correctly? I know people don't all have the same screen resolution, so what do I do? I want to make a banner too and am having the same dilema. Do I just make it one size, like 800x600 then have to do some kind of code to make sure it looks good for everyone? If so, can someone please tell me how it goes?

Wel lthere are a number o ways to solve those problems. As far as the background goes, sometimes it is best to have a seamless tiling image. That way no matter what resolution the viewers screen is set to it will fil lthe screen without looking badly. You can tile it vertically, horizontally or both. This speeds up loading time if you have a small image repeating. If you do use a large image without tiling it, you can use CSS to fix it in place so the back ground will not move when you scroll the page.

Is the banner going to extend across the entire width of the page? Alot of people design the page to fit a minimum screen resolution depending on their audience. The standard use to be 800x600, but I think that now most of the population uses at least 1024x768. So if you design your page to one of those sizes and enclose the design in a fixed table so that it basically looks the same on other screen resolutioons, just with a little extra space on the sides.

Comment/Reply (w/o sign-up)

lonebyrd

Oct 7 2006, 01:47 AM

I don't want to make an image that is a tile kind, it wouldn't look right the way I am doing it. And as for the CSS and the scrolling, I was asking how to do something like that. Is that what I would need to make it look right in all browsers? I don't know if backrounds look different in different browsers so I don't know if there needs to be some sort of coding done. I wanted to know how to code it to make it look good.

*Edit* Take a look at my website. You will understand why I am asking for help in making it viewable in all browsers. It doesnt come up right in my Firefox browser. My Webpage

Comment/Reply (w/o sign-up)

foolakadugie

Oct 7 2006, 11:37 AM

QUOTE(lonebyrd @ Oct 6 2006, 06:47 PM)

I don't want to make an image that is a tile kind, it wouldn't look right the way I am doing it. And as for the CSS and the scrolling, I was asking how to do something like that. Is that what I would need to make it look right in all browsers? I don't know if backrounds look different in different browsers so I don't know if there needs to be some sort of coding done. I wanted to know how to code it to make it look good.

*Edit* Take a look at my website. You will understand why I am asking for help in making it viewable in all browsers. It doesnt come up right in my Firefox browser. My Webpage

I looked at the image and these are might thoughts on the problem. If you scripted it to make it stretch the entire width and height no matter what screen resolution, it may become very distorted and pixelated. There are ways of detecting browsers and screen resolutions (which could send them to a specific page designed for that resolution) but that may be too much trouble.
Personally my solutiom would be to put the entire webpage within a table with a fixed width of 800x600 and then behind that just give the page a background color, so that if someone views it at a larger resolution, it would start tiling the image and everything will stay in place. If you want to do a fixed background image that doesn't tile, you will still be left with a big border around the background image if viewed at a higher resolution.

a scipt like this will do the fixed background image though:

CODE

Comment/Reply (w/o sign-up)

Hercco

Oct 8 2006, 04:26 PM

Your only good option is to use a fixed width page. Just don't do it with a table, but a div block.

Checking for screen resolution and handing out "suitable" page for the browser doesn't really work as screen resolution does not equal the browser window width. I don't know about you guys but at least I don't use full screen browsing with my 1600x1200 screen. And people use much higher resolutions too.

To be honest, "full window" backgrounds in my opinion are a bad idea. They work fine for websites that have little textual content and you can use a fixed sized box inside the document body to form the page, you know the kind of sites that are in that style. Or sites that open into a small window.

Would a partial background be an option? For example, you could use a gradient mask to fade the background image into the background color. That could end up looking cool and be functional for all window sizes. Then perhaps combine the background image design with menus and a banner or a logo?

Comment/Reply (w/o sign-up)

KDEWolf

Oct 11 2006, 04:04 AM

I'd suggest you to make you site using no tables, only styled DIV and SPAN tags (and also styling key HTML elements, as A, BODY, etc) using CSS stylesheets. The first advantage is that you can easily update the whole site's look by editing only a single file. The second one is that you can a different CSS for each browser and/or resolution, for example.

About the actual background image, do as Hercco suggested. It's the best way to begin styling your background. Later, once you're more experienced you can try some more complex stuff...

Comment/Reply (w/o sign-up)

Grafitti

Nov 16 2006, 04:12 PM

What about a fixed header length of 800 or 1024, which then fades to solid color. that way you have a 1px image to the right of the header, which stretches to 100%. that way anything larger than an 800 monitor will display the color banner, and those that don't have such a big monitor won't notice the difference.

Comment/Reply (w/o sign-up)

(G)Francesca

Sep 4 2009, 03:31 AM

Please help us with our myspace background issues
What Is The Best Size To Make A Background In Photoshop?

Hello All,

We read everything on this page and tried to fix this issue but it just won't work. I understand that you think full background images are a bad idea, but we love how the page looks on a mac. Problem is that most browsers / pcs cut off the image on the left side and only one of us is displayed. Can you please help us fixing this? Thanks so much in advance. Here is the code we use presently:

<img Style="visibility:hidden;width:0px;height:0px;" border="0" width="0" Height="0" Src="http://counters.Gigya.Com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNTIwMzM5MDE2OTUmcHQ9MTI1MjAzMzkwOTUzOCZwPTMyMzAwMiZkPW15c3BhY2VsYXlv
dXRzJmc9MSZvPWEzYTZkY2E5Y2RkNjRkOGJhZTE*YzM2NmFiYTY4YTg5.Gif" /> <p align="center"><a Href="http://www.Msplinks.Com/MDFodHRwOi8vd3d3LnBpbXAtbXktcHJvZmlsZS5jb20v"><img Border="0" src="http://content.Pimp-my-profile.Com/support2.Gif" Alt="MySpace Layouts" title="Myspace Layouts" Style="position:absolute;top:0px;left:0px;" /></a></p> <style> .Pimp_my_profile { Generated at Pimp My Profile Www.Pimp-my-profile.Com } table, tr, td { background-color:transparent; } table, tr, td { background-color:transparent; border:none; Border-width:0px; } table table table { width:100%; max-width: 600px; } Table table table table { width:100%;; } body, .BodyContent { Background-color:000000; Background-image:url(http://img2.Pimp-my-profile.Com/i43/2/8/10/f_c9275bf7b66d.Jpg); Background-position:Top Right; background-attachment:fixed; Background-repeat:no-repeat; border-color:FF2222; border-width:6px; Border-style:Solid; } table table { border:0px; } table table table Table { border:0px; background-image:none; Background-color:transparent; } table table table { border-style:Solid; Border-width:2px; border-color:2222AA; Background-image:url(http://content.Pimp-my-profile.Com/tp/000000-70-tp.Png); Background-repeat:repeat; background-attachment:fixed; } table, tr, td, Li, p, div { color:ffffff; } </style> <p><a Href="http://www.Msplinks.Com/MDFodHRwOi8vd3d3LnBpbXAtbXktcHJvZmlsZS5jb20vbXlzcGFjZS1sYXlvdXRzLw==">Myspace Layouts</a> / <a Href="http://www.Msplinks.Com/MDFodHRwOi8vd3d3LnBpbXAtbXktcHJvZmlsZS5jb20vaXNjdXRlLw==">Hot Comments</a> / <a Href="http://www.Msplinks.Com/MDFodHRwOi8vaW1hZ2VmcmEubWUv">Image Hosting</a> </p>

-question by Francesca
Keywords:

Comment/Reply (w/o sign-up)