7 Years
Discussion Span
Last Post by Lusiphur

Background size depends on the type of background image you're keeping.

If you're gonna have a picture of a landscape or anything similar, then I suggest you using high quality image with size of somewhere between 1280*960 and 1400*900. But the size and the quality of the background image increases the file size as well; making the sites take longer time to load. I personally avoid such background while designing lol.

If you're keeping a repeating background image like dots, lines or plain gradient, it is best to cut the smallest non-repeating unit out of the actual background. After that, you can give the background styles in CSS as the way you want it to be. This is a good way to load a website quickly.

If you're keeping a repeating background image [even though the whole background doesn't seem as if it is repeating], then I suggest you to cut out the minimum part of it that repeats. This is necessary for sites having complex floral patterns, image patterns [wood, water, glass, etc] and other similar ones.

I don't know if I've missed any other examples, but I believe you'll be needing these for now. Hope I was helpful.

Edited by DriftingSteps: n/a


agree with raccoon, Web template? what the bleep do you mean?
and with drifiting steps explanation of hwo the background works

If neither post provides insight into your problem, post back with some explanation of what the problem is
If you have sourced a web template from somewhere and you are having difficulty deciphering its options. You didnt get it from here. The gurus will require the code you are having trouble with, what you have attempted to rectify the problem,
If it is general 'how do I apply a bckground' the same gurus will require the code you have developed thus far.


sorry for late reply guys. I mean about body background size. if i made a web template in Photoshop, the size in mozilla didn't match the size of photoshop.thanks for advance.


Hi there,

You can check this out:

<TITLE> Table Background</TITLE> 
<style type="text/css"> 
border:1px solid grey;
border:1px solid black;
    font-size: 9pt; 
    text-indent: 20px;
<table class="tablecolor">
<tr class="rowcolor">
<td>Row1,Column1 </td>
<tr class="rowcolor">

and for a background image you can write

       font-size: 9pt; 
       text-indent: 20px;
       background: #F2F2F2 url('images/back.gif') repeat;

I hope it might help you.



Ok, a brief note on backgrounds...

Size of the background in the web browser (IE, Chrome, Firefox, etc.) is based on the resolution of the screen displaying it (minus the number of pixels required for the borders/menu bar/etc of the browser itself).

Generally it's not a good idea to try to make a 'full screen' background for a website as most of the people who will be viewing the site will likely not be using the same screen resolution as you will.

What I normally recommend is that you try setting a background of a fixed size width wise that tiles vertically and is centered horizontally (or fixed size vertically that tiles width wise) and has an easily repeated pattern that's not too complex (or painful on the eyes).

Alternately, if you want to have a graphic of some sort for your background, a fixed size image that is less than full screen on most resolutions that floats in the middle of the page with the content on top of it works well.

My usual target resolution for websites these days is 1024x768 as that is about the lowest resolution that the majority of people online are working with currently, many have much higher resolutions.

To sum it up, single 'full screen' background = bad, simple tiling background or floating fixed size (fit within 1024x768 screen which would be less if you take into account the amount of screen reduction from browser boarders and windows components) background = good.

Hope this helps :)

Edit: As a side note, not trying to criticize anyone here but I would personally prefer if I never had to read an entire post in red text again as long as I live :twisted:

Edited by Lusiphur: n/a

Votes + Comments
red text, thankyou

To give a bit of illustration to what I was saying about the screen resolution variances from viewer to viewer I'm attaching a screen cap from the analytics of my website that shows the full range of resolutions that have been used to view my personal site.

As indicated the vast majority are above 1024x768 with only a couple falling below that which is why I suggest building any site for a minimum resolution of 1024x768 as optimum viewing size.

Attachments ScrRes.jpg 50.03 KB

sorry for late reply. Thank you very much for your reply with my problem. I really appreciate your given ideas and examples. Now i know what to do.


Just as a side note, canterorist...

Always a good idea to mark a thread as solved once you've gotten what you need from it (mark as solved os to the left of the reply text area) so that further users don't think that more work is still required in the thread :)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.