dimesnions of a background image

[php_begins]

I have a general question about background images...i am not a graphic designer..so i dont know what dimensions an image should be to make it a background image so it does not look distorted..

here are some example pages that i have tried that dont fit well :

http://www.texaslakesandponds.com/index_test.html

http://www.texaslakesandponds.com/index_test1.html

http://www.texaslakesandponds.com/index_test2.html

http://www.texaslakesandponds.com/index_test3.html

[Sharpie]

It's all about finding a good balance between adding to the design,  not overpowering content, and load times. If you choose a huge background image; there will be length loads. If you choose a background image of tiled waves, it may distract from the content with it's busy look - a possible fix for this is washing out an image to be tiled. You could go with a plain color, but does it add - or degrade form the final product.

 

In my opinion, the site would benefit most from a static background image, that acts as an extension of the header by about 150px on each side. Have the trees on each side fade to either an off-white, or off-black (charcoal gray) - and set this color as your background color. Adding some padding to your container(... you are using tables... I'm not of too much help, sorry. I will continue anyways) will add more definition against your background image, aiding in readability - this may look odd with your menu the way it currently is.

 

body{
background: url(imageDirectory/image_name.jpg) no-repeat center top scroll #COLOR ;
}

Where no-repeat stops the defined background image from tiling.

Center centers the image to the page.

Top anchors it to the top of the viewport.

Scroll moves allows it to be scrolled off page.

#COLOR is the background color.

 

If you need to have a set background image, try to accommodate a graceful fade into a static color at it's edges, so when viewed on a large resolution - it doesn't simply chop off. Looking at most used resolutions to date, I feel like designing for 1024x768 is safe for norm, but you can accommodate for up to 1920x1080 if you like - anything beyond is just bandwidth wasted.

 

There are issues to address as is; your load times can be improved on, the images loaded can be optimized down quite a bit, this includes avoiding image resizing (your slideshow re-sizes some images - just crop). Tables are on their way out as a way of holding non-tabular data, HTML+CSS using divs isn't too difficult to learn.