Personal vs Business

Backgrounds can be a wonderful way to spruce up a personal web page or create a specific look for a business. Backgrounds can be solid colors or graphics.

Graphics can be used in three different ways.

1. Tiled Graphics – Vertical and Horizontal
   Small graphics can be used to set a common background that is tiled across the screen both vertically or horizontally. The width and height of these graphics are often small, but they can be any size. They’re usually smaller than 1366 wide x 768 high.
2. Tiled Graphics – Vertical
   A wide graphic can be used that defines a common width, but is tiled vertically. The typical width of these graphics are 1366 wide, but the height can vary.
3. Anchored Graphics
   A full size background image can be used to fill up the entire screen, and allows the text and graphics on your page to scroll over that image. This is a common practice for blogs, but there are many websites who use this method as well. The typical size for these graphics are 1366×768.

The background of a website is generally set within each page. For businesses that means ensuring that all page settings are uniform throughout your website to create a professional look for your organization. Today most companies present their websites in plain white, or white for the main area and some other color or graphics for the side bars to promote their brand.

Websites for entertainment or public figures, use their artistic creativity to promote their brand for their background image. One of my favorite public figures does this very thing, so if you’d like an example check out Stewart-Haas Racing.

Blogs use Theme packages to set their backgrounds. In the Appearance section, you can decide if you want a solid color like I use here for the Kosmos, or if you’d like an image that is anchored in the background. If you’d like an example of that, check out Spyderwolf’s Galaxy for an example.

Blogs set the default appearance for your site and you don’t have to worry about it as you post articles and pages to your blog.

Websites can do the same thing with advanced code such as Java, ColdFusion, CSS and other various languages. But in standard HTML, the background, look and feel of your site are done page by page. If you go this route you can set up a template file that has your basic design, then save it as Template.html or some similar name. When you’re ready to create a new page on your site, you can open that file, save it to a new file name for the new post and you’ll have all your page configurations ready to go.

In HTML 101 – The Bare Minimum Basics I explained the three parts of a webpage. The Header, Body and Footer. The Body tag sets the background color, you always want to do this, even if you’re using a back ground image. This way, if your background has issues with loading on your page, or takes longer to load on some older computers, your visitors will still be able to see your text.

If your background is a dark color and you have white text, but you didn’t change the background color, it’s likely your webpage will load with the default white background. White text on a white background, that’s going to be hard to read. So take time to set your background to the same dominate color as your background image.

Defining Your WebPage
The background configuration for a webpage is set at the very beginning of your code in the Body tag. Let me take a moment to remind you there are two versions of HTML tags. Web 2.0 is the most commonly used version today, which describes World Wide Web sites that use technology beyond the static pages of earlier Web sites, presumably Web 1.0.

A typical Web 1.0 HTML page starts out looking like this:
The BODY tag defines the background color, the background image, the color of the TEXT within the page, what color to make the LINKS and once someone visits the links, what color to change those to, they become visited links or VLINKS.

Web 2.0 will have the same layout and specifications, but the codes will be a little different. It will look like this:
The comment at the top of the code tells the browser what kind of HTML is within this document. This helps the browser process the codes you define more quickly because it doesn’t have to figure this out for itself. The page settings are part of the STYLE, and instead of using cryptic tags like BGCOLOR, this Web2.0 version spells it out for you.

Web2.0 also allows you to do some things that Web1.0 doesn’t. And here in the Body tag is a good example. The additional parameters in red are telling the browser to use the background image as an Anchored Graphic and fix the image to the top left side of the browser screen.

That’s all there is to it. If you’re using a blog to create your site, you don’t have to worry about all this other than to set it up when you first configure your blog. I’ll talk about that, in the Blogging section.

© 1997-2014 Springwolf, D.D., Ph.D., Springwolf’s Kosmos. All Rights Reserved.