website background techniques?

Question

I am fairly new to website design and I'm just trying to figure out the different ways of filling the page with the background...bear with me..i have a few questions!

1. I know that there is a tiling method, either horizontally or vertically to fill the background and this method is good to use to save with download times etc.
But with website like these, would they have a whole image as their background? http://www.crafton.pl/    http://dansweetdesign.com/
With a full page background what dimensions would you have to use when creating them?
Is it better sticking to backgrounds you can tile so they aren't so download hungry?

2. Also, how do you (what dimensions do you use etc) allow for variable heights, so that a client can add extra text into the body of the site, so that the design and background stretches to accomodate? eg. with this website how can you keep the footer stuck down the bottom no matte the size of the body?
http://www.bokche.com/portfolio.html


thankyou so much in advance!

just &quot;JR&quot; · Accepted Answer

That is a lot of questions!

In short:

- Plain body: just set a plain colour for your body (<body bgcolor="#FFFFFF" >). Fast, easy... boring (but white is not that bad!)

- H&VTiles: design a square (or rectangle) with the pattern you want. Repeat x & y. Fast, but, if badly designed, you see the seems: not too pretty.

- H Tile: to give you a nice gradient, build a rectangle, 10 x 1700px, with a gradient.

Locate it "center" in CSS, repeat-y: fast, nice gradient from side to side.

- V Tile: 2000px x 10, vertical, gradient or whatever. Locate it top, repeat-x in CSS: fast. One problem: it will not repeat Y if the page is more than 2000px. You can use repeat-y as well, but then, the design must be identical on top and bottom, to avoid seeing a seem. Not my favorite.

- Large image: Bad idea, because your image will have to be able to cover ALL screen sizes (from 800 to 1660 h, and up to your longuer page vertically, or it will tile. You can use the same technique for banners: make a very long one and stick it left: you loose the right side of your banner. See http://www.jrcw3.com/ for example: the importance of details in the banner decreases as you go right.

(The text "login" is dynamically located to the right of whatever screen width, even if you resize)

- Footer: to keep the footer at the bottom, there are two methods: table or div.

(DON'T listen to ***s who tell you that you CANNOT use tables for layout: they never develop complex interactive sites, never used AJAX, and never tested their sites on ALL browsers - or never managed to get their site working the same way on all of them).

Tables ARE reliable on all browsers, Div are not, especially if you update contents under AJAX (multiple problems will rise, and browsers differences will give you headaches).

Table example

<tr><td> NAVBAR </td></tr>

<tr><td> MAIN CONTENTS </td></tr>

<tr><td> FOOTER </td></tr>

</table>

You can now change the contents of "main" to ANY length: the footer will stay below the main contents.

It is possible to do so with divs, but then you cannot use "position: absolute": all divs have to be "position: relative" (to each other), and div heights CANNOT be fixed (or you get problems when contents suddenly overflows!)

If you want to stick the footer "at the bottom of the screen", detect the height of the screen in javascript, and set it as a div with fixed position. But, then, you must be careful of the height of your page: it the user resizes his window, you are in troubles...

LOGO

NAVBAR

MAIN CONTENTS

FOOTER

You can now change the contents of "main" to ANY length: the footer will stay below the main contents. It is possible to do so with divs, but then you cannot use "position: absolute": all divs have to be "position: relative" (to each other), and div heights CANNOT be fixed (or you get problems when contents suddenly overflows!) If you want to stick the footer "at the bottom of the screen", detect the height of the screen in javascript, and set it as a div with fixed position. But, then, you must be careful of the height of your page: it the user resizes his window, you are in troubles...

Anonymous · Answer

Because JPEG images can't have transparency, you need to blend in a suitable background color or pattern. This will be easier if your website has a solid color background. You can use the Eyedropper tool on your background image to acquire the correct blend color. If you already have a PNG version of your image, you can simply add a layer behind it and fill it with the needed color. Otherwise, cropping the image as Wendy suggests is your next best option.

Trending News

website background techniques?

2 Answers