by
Kris
Gosser AKA Kristopher : 9 February 2005
The CSS Code
Now that we have our final image (go to the
previous page if
you have not done that), we are ready to put
it into code. First let's declare in our external CSS the
body background color.
- /* CSS Code */
- body
{
- background:
#B4C0C9;
- }
The background color must
match the background color we picked in our Photoshop image.
In this case, it's a solid blue color: #B4C0C9.
The "body { }" is CSS language to reformat the body tag for
any page that links to this CSS style sheet. So any
attribute declaration between the curly braces will take
affect.
The goal is to have one
container div with a background of the
shadowed image we created. This image will then extend
vertically with the div. To achieve this affect, we will
need to construct the div with code like this:
- /* CSS Code */
- div#container
{
- background:
url(image.jpg)
repeat-y
#FFF;
- }
There are three parts to this
background declaration. The first, "url(image.jpg)," tells
us which image to grab and where to grab it. The second
part, "repeat-y," tells us to repeat the background image
vertically (y-axis) as long as the container div extends.
And finally, the third part, "#FFF," is just in case an
older browser can't recognize the image code. If it doesn't,
then this color will be the background. It's beneficial if
you want a separate color for your container div compared to
your background.
Shadows With Patterns
Some people might want to put a shadow onto a patterned
background. That's going to be difficult because there's no
solid attribute, and the pattern needs to tile perfectly to
look just right. And what happens if a viewer with a 1600px
wide resolution looks at the site versus a person with an
800px wide resolution? There's that much more pattern that
needs to dynamically tile up and fit perfectly. So how do we
do it?
Enter The Ridiculously Large Image
That header is correct. We will be using an outlandishly
large image for our background. A 3000px wide image to be
exact! Here are the steps:
- Follow the instructions on the previous page in
regards to Photoshop. What you need to do is make a
3000px wide image, and fill it with your pattern. This
will be the background.
How do I make a background patterns? It's
pretty simple actually. First, find your pattern. I took one
from a favorite spot of mine that no one knows about. It's a
sweet website with some nice flourishy, damask patterns:
www.theinspirationgallery.com. I saved it, opened it in
Photoshop.
- I then looked at the height of the pattern - that's
important because your main shadowed image will be
3000px by Xpx where X equals the height if your patterned image. In
this case, my patterned image was 224.
- Make your main background image 3000px by Xpx.
- Go back to your pattern. Select all of it and go to
Edit > Define Pattern. This will set this image as a
pattern.
- Go to your background image. Select all of it and go
to Edit > Fill. Under the options that pop up, choose
pattern, and select the pattern you just made.
- Bingo! The whole image, all 3000 pixels of it, will
be filled perfectly with your pattern. Now to the
shadowed part.
- I decided I want to have my content area 600 pixels.
So I took 3000-600 and got 2400. Then I took 2400 and
divided by 2 and got 1200. These are where I want to put
guides - on 1200 and 1800 because that's where my middle
of my image is and that's where the content needs to go.
So my Photoshop image will look like this:
- I'm going to go through the same process of applying a
shadow as on the previous page. Just make sure the
background is a layer below the content color. So in this
case, the background and the white box are two separate
layers. Then just use the burn tool. You'll get an image
like this:
- Save your image for the web. Get a quality
value of around 60.
The CSS Code
The code is virtually the same as at the top of the page,
except there will be a few tweaks to the container div.
Here's what it will look like:
- div#container
{
- background:
url(bg.jpg)
repeat-y
#FFF;
- background-position:
center
- width:
3000px;
- height:
auto;
- margin:
0
auto;
- }
The important code in there is margin: 0 auto;.
This will always center the div, so the 600px wide solid
color part will always be your background. It should work
from here on out.
A Little Discussion
There's always some controversy to this method of
development. Some critics say that a 3000px wide image is
too much for a user to download. Well, with a backup color
for the body and background, that's always going to be there
until the image loads. And the image is only 11kb, so in
today's world, that will download pretty fast - and much
faster than a Flash file. If this is an effect you really
want to pull off, then have an image that large is worth it.
 |
page 2 of
2 |
|
|
