creating fun and nice backgrounds
Today I am going to teach you how to make some neat backgrounds and such.striped backgrounds
Go to stripemania.com and create
a suitable stripe. When you are done, click on "Download this stripe". If you
have Firefox, right click on the normal version and click view image. Copy the URL
of the image and go to Tinypic.com. When you
click browse, hit paste in the bar and your computer will do the rest. Hit
upload, and use that link for your background.gradient backgrounds
This is the GIMP version. Even though that is stated, you may be able to understand
what I mean to do and I suppose it's possible to do it on other programs.First, create a new file. A suitable size for a gradient background is 100 width and 200 height. Now, look at the foreground and background color. Change both to suitable colors for gradient. Tip: Put the darker color as foreground, and the lighter one as background. An example picture:
Go to the Blend Tool. Now, make your way
towards the blank image file and click in the gray area. Don't let go! Keep
it "clicked on". Drag the line downwards until you hit about 1/2 of the white area.
Keep this line in a straight line or the gradient will not turn out right. Finally,
let go. You now have a gradient!
This is the result. You still aren't finished, though. Go to
the tool that copies colors. (The paintdropper) and click on the light color at the
bottom. It should appear as a foreground color. Double click on it, and copy the "HTML notation".You're almost finished! Time for CSS to jump in.
The code:
body {
background-image:url('link_here.png');
background-attachment:fixed;
background-repeat:repeat-x;
background-position:top;
background-color: THE HTML COLOR YOU COPIED
}
This should keep the gradient repeating at the top of the page (repeat-x). I'm not so sure that the background-position thing is so necessary, but I just put it there. So basically, your background image will be repeating at the top of the page, while the html color you have will help keep the look of the gradient.
repeating, but okay backgrounds
Some tips when you make repeating
backgrounds:- Keep it spaced out a little
- Have the background color fit the layout. For example, the color of the background color is from the headings. See how they look alike? It help keeps the flow of the layout.
