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

	What Is The Best Size To Make A Background In Photoshop?
	Discussion by lonebyrd with 11 Replies. Last Update: May 30, 2011, 1:42 am

lonebyrd

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?

Thu Oct 5, 2006 Reply New Discussion

foolakadugie

QUOTE (lonebyrd)

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.

Thu Oct 5, 2006 Reply New Discussion

lonebyrd

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

Sat Oct 7, 2006 Reply New Discussion

foolakadugie

QUOTE (lonebyrd)

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

Sat Oct 7, 2006 Reply New Discussion

Hercco

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?

Sun Oct 8, 2006 Reply New Discussion

Grafitti

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.

Thu Nov 16, 2006 Reply New Discussion

(G)Francesca

Please help us with our myspace background issuesWhat 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:

[TCOL]

[TROW][TCOL]

<imgStyle="visibility:hidden;width:0px;height:0px;" border="0" width="0"Height="0"Src="http://counters.Gigya.Com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNTIwMzM5MDE2OTUmcHQ9MTI1MjAzMzkwOTUzOCZwPTMyMzAwMiZkPW15c3BhY2VsYXlvdXRzJmc9MSZvPWEzYTZkY2E5Y2RkNjRkOGJhZTE*YzM2NmFiYTY4YTg5.Gif"/> <p align="center"><aHref="http://www.Msplinks.Com/MDFodHRwOi8vd3d3LnBpbXAtbXktcHJvZmlsZS5jb20v"><imgBorder="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 ProfileWww.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 tableTable { 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><aHref="http://www.Msplinks.Com/MDFodHRwOi8vd3d3LnBpbXAtbXktcHJvZmlsZS5jb20vbXlzcGFjZS1sYXlvdXRzLw==">MyspaceLayouts</a> / <aHref="http://www.Msplinks.Com/MDFodHRwOi8vd3d3LnBpbXAtbXktcHJvZmlsZS5jb20vaXNjdXRlLw==">HotComments</a> / <aHref="http://www.Msplinks.Com/MDFodHRwOi8vaW1hZ2VmcmEubWUv">ImageHosting</a> </p>

[/TCOL][/TROW]

[/TCOL]

-question by FrancescaKeywords:

Fri Sep 4, 2009 Reply New Discussion

StarGaiz

(I first wrote this as a non-registered guest, so I'm retyping it here after registering and logging in. If this accidentally shows up twice, I will delete the first one, and apologize in advance. It hadn't shown up yet, so I wanted to make sure my reply posted. Thank you).
I started out wanting to ask the same question as 'lonebyrd.' But I eventually figured out what I really want to do, is be able to make my own header and footer design that looks painted on drawing paper grain, then have a small image of that same paper grain tile all of the in-between background in a way that moves (scrolls) with the blog posts all the way down.

In a way that's almost exactly like this beautiful blog:

They have a canvas background that seams seemless from top to bottom. I want to do exactly that, but have my own design at the top & bottom, where their paint splotches are, and instead of canvas thread, I'd like a seemless paper texture behind it all. I'd probably be using a pre-existing simple blogger template. But want to adjust the image and typography.

So how does one get a portion of their background texture to seemlessly repeat all the way through, so that it will look like a solid contiguous piece of paper background?

I'm a graphic design student, some (small amount of) html background, am very good with Photoshop (where I intend to make all of this). And could use a little bit of Illustrator if need be. But my basic questions come down to what size to begin the images with, and how to put it all seemlessly together.

Thank you so much for your time & consideration in reading & helping me w/ this. I look forward to hearing back from you soon!

Happy Day!

Sat Sep 11, 2010 Reply New Discussion

pentangeli

There's no real right way to get an irregular surface (like paper) to repeat without obvious patterns beginning to appear once it's been tiled many times, but there is many programs and applications which will attempt to make a seamless tile from whatever image you give it (I suggest no more 100px by 100px) you can go up or down a fair bit in size but realistically, anything a lot larger isn't even worth tiling. I would let the app (texture magic for mac is good) attempt to make a seamless tile for you, then I'd definitely take it into photoshop and refine it. You can test it in there. Simple open the tile it generated, go to "Define pattern" and define it as a pattern. Extend the canvas area to a really big size and go to Fill from the top menu and select the pattern you've just defined, you'll now see how seamlessly it tiles. No doubt it'll have a few problems (edge or center). Edge problems will be it not repeating uniformally (like black sharp artifacts going into lighter parts of the next tile on the mirrored edge) or center problems (there's a lot of detail in the center of the tile creating a kind of "tapestry" effect all over once tiled (which looks horrible). So with tiling, less is more. less detail in the center and experiment with making the edges bleed into each other, around all 4 sides until the transition is truly "seamless".

Concerning your question, you should use the background attachment to be either fixed or scrolling and to repeat both x and y with the css background image property in the body selector and you could then maybe use an absolute relative div overlay with a transparent background to hold a png image with an alpha channel to show the background tiling through it. This is a method of having images with transparency which seem part of the background yet are free of it's restrictions. For example, you could have the background scroll beneath a banner. Forgive me if I misunderstood as the link to the example blog you posted wasn't there. This method is pretty simple though. Seamlessly tile a background with css styling and use positioned divs to add unique fixed or otherwise details to them. Any background larger than a large image slice tends to load really slowly, unless it's a gif which is a horrible image format for detail. A low resolution jpeg can offer some suitable results but you should always be tiling smaller background images (taking phones and laptops into account) most of the world will never see your 1024 by whatever slower loader.

Sat Oct 9, 2010 Reply New Discussion

xamire

QUOTE (lonebyrd)

Either get, or make a small square background image (5x5 or smaller, no actual photos, just use textures, or flat color), and then code your background to repeat that image (make sure the squares look decent together).
Using a flat image background is a no-no generally speaking. It's a huge picture, that has to load with all the other things on the website, thereby slowing it down.
Imagine if 1000 people had to load that same image on every screen. Exactly.

Meanwhile, repeating the background is like loading a small 5x5 square, and telling the browser to repeat and fill in all the white space with the same one small image.

Sun May 29, 2011 Reply New Discussion

manuleka

unless you don't mind your background showing only part of it on smaller screens and big blank space on wide large screens it's best to have a few background sizes and let a script do the prior-check for screen size for you

for example:
so if this was me i'd be looking at a script to check the Browser platform, and then that script will call either jscript/javascript/vbscript etc.. (depending on Browser support) to check for screen size and call out the background

Mon May 30, 2011 Reply New Discussion

KDEWolf

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...

Wed Oct 11, 2006 Reply New Discussion