Backgrounds
Written by Kathrin
People more familiar with coding usually use CSS for backgrounds instead of HTML. CSS allows you a lot more customization. It is, however, still very simple.
Using CSS coding, your code will be for a certain element of your page. Throughout most of this tutorial, I will use "body" as class. You can change this to any other class you'd like. Your CSS codes
always need to be within the tags.
Color Background
There are multiple ways to change the background into a solid color.
h1 {background-color: transparent}
H1 now has a "see through" background. You will be able to see any background it has been layered ontop of. For example, if your body background is green and
h1 is ontop of this, you will see the green property of the body as the background of h1. If you change the background color of the body, h1 will
automatically adjust to this new color.
body {background-color: red}
body {background-color: #FF0000}
Both achieve the same result, a red body background. You can choose whichever your more comfortable with, though the latter offers you a much greater color
pallette to choose from.
Tiled Image Background
body {background-image: url('image url');background-repeat: repeat}
Replace "image url" with the link of the image you want in your background. This is a repeating image, hence the background-repeat tag.
Restricted Image Background
body {background-image: url('image url');background-repeat: repeat-y}
The code above will make your background only repeat vertically. If you change the y to an x, it will only repeat horizantally. This is useful when making
div style graphics, such as website layouts.
Position Image Background
body {background-image: url('image url');background-repeat: no-repeat;
background-attachment: fixed;background-position: x y}
This code will position your image in one set place, without scrolling away. This code is used in some website layouts and the like. X is the number of
pixels your image will be offset from the left, y the offset from the top. You'll need to replace both with numbers. The higher the numbers, the further to
the right (by x) and to the bottom (by y) your image will be placed. Replacing the fixed with scroll will result in your image scrolling away.