Backgrounds in CSS
This little tutorial is to help you define your background properties for the main body of your website in css. Now in your html files you may be used to defining your background properties in your body tag but now we have a body section open in our css file body { } - if you don't know what I mean please refer back to the introduction to css. This tutorial will now expand on how to apply properties you would have used in your <body> tag into your css sheet instead.
<body bgcolor="black">
This simple background colour can be added into the body easily. Just use background: #colourcode and you're set. It should now look like:
body { background: black; }
<body background="image.jpg">
Can be transformed into the very simple background-image: url(image.jpg). So if we add this in it will now look like this:
body { background: black; background-image: url(image.jpg); }
<body background="image.jpg" bgproperties="fixed">
This nifty little extra allowed for your image to remain fixed instead of scrolling with the rest of the content. Adding this is done with background-attachment: fixed/scroll. Adding this into our body section, will now look a little like this:
body { background: black; background-image: url(image.jpg); background-attachment: fixed; }
Now with css we also have some other properties for your background to consider. The next is background-repeat. The default is for a background image to automatically repeat over the page, however you can change this so the image will appear only once (no-repeat); so the image will be repeated vertically (repeat-y); so the image will be repeated horizontally (repeat-x). So we can use the background-repeat: repeat/no-repeat/repeat-y/repeat-x in our body section, and it will looking something like this:
body { background: black; background-image: url(image.jpg); background-attachment: fixed; background-repeat: no-repeat; }
And lastly on our background properties list we have the starting position (background-position) of the background. Obviously the default is the top left corner of the page, however you can change this to one of the following: top left/ top center/ top right/ center left/ center center/ center right/ bottom left/ bottom center/ bottom right/ x-% y-%/ x-px y-px (where you would set x and y in respect to where you want it to begin) So now we have:
body { background: black; background-image: url(image.jpg); background-attachment: fixed; background-repeat: no-repeat; background-position: center left; }
And now you've expanded your knowledge on backgrounds and defining their properties in css, so you can get rid of those ugly boy tags in your html now. :)