Welcome to the MacNN Forums.

topherko · Oct 7, 2004, 07:05 PM

I am interested in making a background for a site that has a vertical line to seperate different colored/patterned regions. Here is an example of something similar to what I am trying to do.

http://www.noisedfisk.com/mumweb/

Assuming that I can create and edit the background image in photoshop, how should I make it the background for an actual site using HTML.
It would not be benificial for it to be "tiled" because of the vertical line split. I don't think it would make sense to have an incredible huge image either. I'd like some way of using a smaller image and having it repeated, but I don't know what part of the image to retain and how to properly repeat as the background.

Any input is very much appreciated. thanks.

mdc · Oct 7, 2004, 08:59 PM

if you look at the code of the site you showed and look at their background image [ http://www.noisedfisk.com/mumweb/img/bg.jpg ] you will see that it is really wide. wider than people's web browser will be, thus it won't repeat horizontally.

then in your css, set it to only repeat vertically.

i would use their dimensions. you could get away with making it thinner. if you want.

registered_user · Oct 7, 2004, 09:05 PM

the short answer is this:

<body style="background: white url(yourbackgroundimage.jpg) repeat-y;">

You could put the style in the head though, or even in an external style sheet.

You could even get fancy with it and do this:

<body style="background: white url(yourbackgroundimage.jpg) repeat-y top center;">

That would ensure the image is centered horizontally. Probably only useful if you're working relative to the center of the browser window, but if you're looking to divide the page in half, that'd do it.

topherko · Oct 8, 2004, 12:58 AM

Thanks. That info helps very much!