Backgrounds
How do I change the background color?
This CSS code that you typed in will format the body tag to have that black background with out having to type in any extra code in the body tag. I prefer using the CSS to the typing in the code in the opening body tag, because Ioften set other attributes to the body tag that will format other elements of the page, such as colors of the scroll bar, background pictures, centering background pics, default text color, default text size and type. We'll get to this later though, for now lets focus on backgrounds.
› Putting in a backgound color is actually very easy. There are 2 ways to do this, you can either put:
bgcolor=colorname of hexidecimal value
inside your opening <body> tag. This will set the background of the whole document to be the color that you put in the code.
Another way to change the background color is by using CSS (cascading style sheets).
Put the following into your document:
<style type="text/css">
body{background-color: color name or hexidecimal value;}
</style>
How do I use an image as my background?
› I find the best way to do this is with CSS, although you can do it with HTML.
In order to make a background picture using css, you will have to enter in more code into the style tag under the property of "body". Here is what you should add:
background-image; url(" picture url ");
background-repeat:---type of repeat element---;
background-position:---type of position---;
background-attachment:---type of attachment---;
Place the url of the picture into where it says "picture url", and make sure you leave the quotes there. The different ways you can get the image to repeat is by replacing "---type of repeat element---" with the following settings:
- repeat (repeats the image vertically and horizontally)
- no-repeat (will not repeat the image)
- repeat-x (repeats the image horizontally)
- repeat-y (repeats the image vertically)
And make sure to keep the semicolon after whatever type of repeat you choose
to use. The different ways you can position your background picture are
by keywords, percentages, and pixel values. You will have to enter in to
things for each value, how they are positioned from the top, and from the
side. When positioning it by keyword, you can use words like Top, Center,
Left, Right, Bottom, etc... although this is not recommended since using
percentages and pixel values are more accurate and can place the image in
a more specific location. To position the background image by keywords,
type in the vertical keyword first(this will be either top, bottom, or center),
then type in the horizontal keyword (which will be left, right, or center),
and make sure to keep the semicolon there. It will look something like this:
bottom center;
You can also position the picture by using pixel values and percentage values.
This works the same way as positioning it with keywords, verticle value
first, horizontal value 2nd. Keep in mind the values you type in will be
of how far away the picture is from the top or the left. For example:
120px 75px;
will make the picture 120px away
from the top of the document, and 75 pixels away from the left. This is
the same when using a percentage value too.
Next is the background-attachment, the two different background attachments
are "fixed" and "scroll". Fixed will make the background
stay in place while the rest of the document scrolls over it. Scroll will
have the document scroll with the document, and it will repeat itself. I
prefer having a fixed background.
replace "---type of attachment---" with:
fixed;
or
scroll;
Now, after you have all of the different elements and values
put into what we had earlier to add in a background image, your are going
to paste it into the original background color code (using css) from earlier.
just place the begining of the code after the last semicolon in the brackets,
and make sure you have all of your colons and semicolors to separate everything.
Here is what it will look like in notepad with some settings i put in myself:
Before entering new CSS coding:
Afterputting in the new CSS coding:
This concludes putting in a background image using CSS, but you can also
insert a background image by adding in attributes to the <body> tag.
Although this method of embedding a background image does not give you all
the capabillities of doing it with CSS. All you have to do is enter background="url"
into the body tag after where it says
"body". If you want the background to be fixed, all you have to
do is add bgproperties="fixed"
into the opening body tag. Unfortunatly with this method, you can not position
the background image, and it will always tile if it does not fill the enter
background. An example of making a background image in using the body tag
is:
<body background="http://www.yoursite.com/image.jpg"
bgproperties="fixed">
