Coding The Background

This section of coding covers what the background area looks like. The coding used decorates the background itself but also includes the main font for the site instead of doing it individually (unless desired). I own full rights to this tutorial courtesy of Plasteeq. If it's helped you or you need help, please let me know.


Below is the background coding I use, I'll explain what each code means and what it's purpose is.



Background Colour - The background-color code is the main background color if you decide to have one. By default, the colour will be set to white. The colour code is made out of 6 digits (a mixture of numbers and letters) and you can find the code by using a colour picker online or by using your editing software e.g. Macromedia Fireworks, Adobe Photoshop etc.

Background Image - The background-image code is what enables you to add a background of your choice to your site. The background can literally be anything you desire, all you need is the background-image code and the image URL to the background you'd like to use. You can either self host through your domain/subdomain or you can use an image hosting site such as Photobucket, Imgur etc.

Background Repeat - The background-repeat code tells the stylesheet what you'd like to do with your chosen background. To have it repeat horizontally only type repeat-x next to the background repeat code, e.g. background-repeat: repeat-x;. To have the background repeat vertically, type the code repeat-y next to the background repeat code e.g. background-repeat: repeat-y;. Finally, to have the background repeat horizontally and vertically, type the code repeat next to the background repeat code e.g. background-repeat: repeat; - this code will tell the stylesheet to repeat the background both ways.

Colour - The color code tells the stylesheet what colour you want your text to be. It can be any colour you desire but try avoiding using colours that clash e.g. a bright colour on a dark background or bright colours on a bright background can be a bit of an eyesore sometimes so try and match the colours so it's not an eyesore to your visitors. The colour code can either be typed as the colour it is e.g. color: blue; or you can use a 6 digit hex code to choose your colour e.g. color: #e73f3f; - the # symbol must go before the colour code though otherwise it won't work.

Font Family - The font-family code tells the stylesheet what font you'd like. I tend to stick to default fonts instead of personal choice ones just to save the hassle but generally speaking providing you link the font correctly you'll have no issues usually. My personal favourites for the main sections of the website text are "Arial", "Verdana", "Times New Roman", "Georgia". I personally dislike small fonts as the main text font, I don't think it's easy enough to read and it will instantly make me click X because it just hurts my eyes trying to read it. Keep your fonts clear and at a decent size.

Font Size - As stated above, fonts should be kept to a decent size but not to big or to small. Around 11 - 13 pixels are pretty decent sizes. That way for those who may have issues with their eyes will now be able to read the text a bit better than what they could at size 8. It's not just you reading the site, you have to take into consideration what your visitors can see. After all, you have a site to gain visitors.

Letter Spacing - The letter-spacing code describes itself. This code just tells the style sheet how much spacing to give the letters on your website. To space them apart more so they're further apart, you need to ensure that the numbers are a positive number e.g. letter-spacing: 1px; - this will tell the style sheet to space the letters out away from each other. To bring them closer together you need to enter a negative number e.g. letter-spacing: -1px; - this tells the style sheet to space the letters out closer together. To have the text at normal spacing, change the value to 0px and it will send the text back to default. Try not to space your letters to far apart or to close together.

Text Decoration - The text-decoration code obviously decorates the text (hence the name). This code can underline your text, strike it out etc. For example, If you want striked out text all the time the code you want is text-decoration: line-through; - all your text will now be striked out. To have no decorations on your text just set the code to none e.g. text-decoration: none; - you'll have regular text now.

This section of the tutorial has now been covered. You may proceed to the next stage.