Web Design Backgrounds

How to Tips for both HTML and CSS

Creating the background of a website – whether you want it to be plain color, a repeated image, or even left blank – is created using HTML and/or CSS code. HTML and CSS are both mark-up languages; your web browser takes the code and turns it, or 'marks it up', into the
website you see on the screen before you.

This is how you create the background of your website: Your HTML code
for a simple website looks like this: <html> <head> <title>Insert
title of page here.</title> </head> <body> Insert text here. </body>
</html> That code would create a rather banal looking website without
a background.

If you want to add in a background, you can modify the <body> tag by
adding an attribute: <body bgcolor="#000000"> This would create a
background in the color of black. The '#000000' bit is a hex code,
which basically means black to the computer. So, your full HTML code
is now: <html> <head> <title>Insert title of page here.</title>
</head> <body bgcolor="#000000"> Insert text here. </body> </html>

You still have a simple website, although now colored black. More
exciting would be an image for a background. To use an image, instead
of color, as the background of your website you modify the <body> tag
with another attribute: <body background="http://www.examplesite.com/exampleimage.gif"> Insert text here. </body> Your code would now, after replacing the color attribute with the new image attribute, look like: <html><head><title> Insert title of page here. </title> </head> <body
background="http://www.examplesite.com/exampleimage.gif"> Insert text here. </body> </html> Great!

However, those background attributes have been deprecated in the
latest version of HTML by The World Wide Web Consortium's
recommendations. That means, basically, that that code would still
work fine on your screen, but no one actually wants you to write it
that way anymore. To make the website code simpler, you should use CSS as well. CSS doesn't replace your HTML; it separates the style so
everything is easier to read.

Now using CSS, there's two different ways to define the same
background you used earlier: in-line CSS, and a CSS style sheet. Your
simple website looks like this, using in-line CSS: <html> <head>
<style type="text/css"> body {background-image:
url("http://www.examplesite.com/exampleimage.gif")} </style> </head>
<body> Insert text here. </body> </html>

The second, and neater, option is to use a style sheet which separates
the code into two different files. Your exact same website looks like
this, using a CSS style sheet: <html> <head> <link rel="stylesheet"
type="text/css" href="mystyle.css" /> <title>Insert title of page
here.</title> </head> <body> Insert text here. </body> </html> And
your style sheet itself is a separate file that looks like this: body
{background-image: url("http://www.examplesite.com/exampleimage.gif")}
I know you're thinking CSS seems more complicated, but it really does
simplify things when you have hundreds of lines of code to keep track
of.

Of course after creating a background, you have to check your website
text matches well with the background and the colors don't clash. Web
design comes down to two areas: knowing how to write the code, and
knowing how to design the look and feel of your website.