How to Tips for Web Page Backgrounds - both HTML and CSS

**whitegyr** · 09-30-2010 05:49 PM

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.

**wink0r** · 10-08-2010 03:45 AM

What you have called an inline style is actually an internal stylesheet. An example of inline css styling would look like <body style="background-image: url("I am not allowed to post links/even fake ones")">.

Further, CSS stands for cascading style sheet. The style closest to the object wins. A style in an external stylesheet will be overridden by a style in an internal stylesheet and a style in an internal stylesheet will be overridden by an inline style. The major advantage to the external stylesheet is that all pages on your site can be linked to the same stylesheet. If you decide that you want to change something about the style of the site you make the change in the external stylesheet one time and the change is reflected on all pages linked to that stylesheet.

So the external stylesheet will control styling and layout on all pages linked to the external stylesheet. An internal stylesheet will control only the one page on which it is implemented. The inline style will only effect the tag in which it is contained, therefore inline styles should be used only for unique situations. If you want the same styling for multiple items on the page you would make a class rule and apply the class to the elements to which you wish to apply the style. If you wanted some paragraphs to appear in red text and a larger size you might make a class rule like: .bigred {color: red; text-size: 1.2em;} Then in the code for the paragraph you would apply the class: <p class="bigred">.

By using an external stylesheet your pages will be smaller files. The browser downloads the stylesheet and the html file, but keeps the stylesheet in cache so subsequent pages will load faster.

**whitegyr** · 10-10-2010 05:21 PM

CSS (cascading style sheet) has a lot of advantages over straight HTML and with Google liking faster loading pages we need to start using them more.

**caveman** · 11-02-2010 01:20 PM

Also if using an image for a background you may need to use the repeat:no-repeat css and positioning styles if you want it centered etc.

Thread: How to Tips for Web Page Backgrounds - both HTML and CSS

Thread Tools

Search Thread

Display

How to Tips for Web Page Backgrounds - both HTML and CSS

Similar Threads

have u all used HTML 5

Html

Less images more CSS

Posting Permissions