rookie question!
by Charlie Hughes
on
Jul 29, 2008 at 11:08:58 pm
I don't know the first thing about website coding so hopefully this isn't a complicated task, but...
I would like to have a background image and an image above it, onto which I will put website content. I noticed in the two examples I'm pasting here, they didn't use a giant image, they used a sliver of an image with the full appropriate width but which duplicated itself indefinitely height-wise according to site content.
What I want to know how to do: How do I make a sliver image duplicate like that, how do i stop it at the beginning and end (so i can add a decent top and bottom to the graphic), and how do I make it automatically adjust the length of the duplicated sliver when i add more content.
Also, what's the best file format to use, with alpha, so that I can can add a drop shadow to this stuff and have transparency work over the BG.
Examples:
Re: rookie question! by Vincent Rosati on Aug 4, 2008 at 1:13:50 am
Uh, wow, that's a complicated question.
First, PNGs with transparency can be tricky because Mac and PC have different gamut settings, so it's difficult to get transparency to work well on both platforms - but it's probably the simplest silution.
As far as getting a background image to tile vertically, you would add the following line to the DIVs style... (I assume you're using Layers (DIVs) and CSS).
background: url(images/tile.jpg) repeat-y;
As far as putting a nice 'top' and 'bottom' in the tiled portion, you would create the 'nice' top and bottom graphic, than set them as the background image for divs that are positioned on the top and bottom of the tiled element.
Both the 'Top' and 'Bottom' would have a defined height value.
The height of the tiled portion would probably be defined by height values of items that are contained within it, to make it vertically expandable, it sounds like that's what you want.
Basically, you would have three DIVs stacked on top of each other (header, content, footer) with defined widths and margins set to...
margin: 0 auto
...to center them on the page
There are a bunch of ways to do it, this is just on solution.
