Adding Backgrounds to your webpages

A background can drastically change the look of a webpage. Sometimes in a nice way, other times not. It depends you see, because if your layout is bright lime green and you put the background has a really eye-hurting bright shade of red, that's not gonna work. (very well anyway) You'll need to choose colors that can compliment your layout.

Adding a background color

This is fairly simple. You only have to add this attribute to the body in the CSS.

background-color:

Your css stylesheet would look something like this:

body {
background-color: black;
}

Note the semicolon ; after the color (black). Now all that goes inside the <style> and </style> tags. Of course, you can replace the color black with whatever background-color you'd like your web page to have. You can find some at my color chart

Adding Background images

This is pretty simple as well. See, just add this attribute to the body in the CSS.

background-image: url('DIRECT LINK HERE');

Replace DIRECT LINK HERE with the direct link of your image of course. Here's an example.

body {
background-image: url('http://mypic.com/image/background.png');
}

To get a direct link, simply go to an image hosting site. I use Mypic and Photobucket. Mypic is easier to use, and you don't need an account, but Photobucket lets you keep track of all your images and bandwidth.

Repeating a background image

When adding a background image attribute to the CSS (the part inbetween the <style> and </style> tags.), the background image tiles by default. Here are some other ways to tile your background images.

You'll have to add the attribute background-repeat: to the body element in the CSS. You can add different values depending on how you want your background image to tile. For gradient-based backgrounds, this is a must.

Here's an example: Click here

If you want your background to tile vertically instead of horizontally though, just use the background-repeat: repeat-y; instead of repeat-x;.

where to get them

Make sure you putting tileable backgrounds on your webpages! Non-tileable backgrounds sometimes look really tacky :P You can find a bunch of tileable backgrounds if you just search around on Google.

Shoutbox

Credits go to Umbreon's Palace for the Shoutbox smilies. ^^

Home/Index

Pokemon

Designs

Graphics

Requests

Tutorials

Other

Kasumi is owned and copyrighted by Misakii, aka Wishjirachi. No content, graphics, or designs shall be redistributed anywhere on the internet. Design/CSS by Miko Reznor.