WebDevology.com

A background image can be applied to any element using the following CSS declaration:

background-image: url(image name);

Shorthand background declarations are written as:

background: color image repeat attachment position;

For example, the following code:

p {
  background-color: #f00;
  background-image: url(background.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

would be written in shorthand as:

p {
  background: #f00 url(background.gif) no-repeat fixed center;
}

The background-position can accept 2 values. For example:

p {
  background: #f00 url(background.gif) no-repeat fixed center left;
}

The first value, called the x-coordinate or x-position, is the horizontal-position or distance from the left. The optional second value, called the y-coordinate or y-position, is the vertical-position or distance from the top.

The top left corner, 0% 0%, is the default location. The right bottom corner is 100% 100%. If only one value is specified, it is assumed to be for the x-coordinate; the y-coordinate defaults to center or 50%.

You can also use units of measurement, such as pixels, points, em units, etc., for the background-position. Negative values are allowed too. Combinations of keyword, length, and percentages are allowed, (e.g., 50% 2em or 100px bottom or left 10%). For logical reasons, when using combinations of keyword and non-keyword values, left, right, and center should only be used for the x-coordinate, and top, bottom, and center should only be used for the y-coordinate.

Always remember to specify a background color when using an image as a background, especially with light-colored text, because the text should be readable if the image fails to load.

Examples:

A recent ala article discusses some of the problems associated with post-secondary web programs. Jason responded by sharing some of the trials and tribulations that we’ve experienced as instructors.

Unfortunately, there are many people addicted to MySpace and, consequently, there are now numerous support groups. You may be thinking that’s kinda funny but I have seen it in my classes…it’s been a big problem…let’s just hope it doesn’t happen to you too.

So why encourage something that is causing people to lose jobs and drop out of school?

The reason is simple…money. Here’s the explanation…

One day I was looking for the White & Nerdy video to show my white and nerdy kids and I came across the White & Nerdy Wikipedia page and started reading (we call this getting sucked into Wikipedia land). From there I ended up looking at both Weird Al and Chamillionaire’s MySpace page, which are both really nice – even by MySpace standards.

I then started thinking…there is absolutely no way that celebrities are “pimping” their own pages…there’s got to be a job market for this. So I searched a couple of the job bank sites and sure enough, there are jobs for people that can pimp a MySpace page!!! Cha-ching!!! Don’t believe me? Go to Monster.com or CareerBuilder.com and search for yourself.

I created a MySpace profile that very day and now incorporate an advanced layout tutorial in one of my classes. I still do not like MySpace because students waste way too much time browsing instead of doing classwork. Not to mention the horribly coded, inaccessible, incompliant, insecure, poorly structured pages that are enough to give any respectable developer nightmares. It’s so bad that you have to use hacks to create a decent looking profile…and this is allowed and even encouraged by MySpace. But I am willing to live with it since there is potential to make money by doing something that people enjoy enough to end up at myspaceaholics anonymous meetings.

I think of this every time I lecture about spam (the electronic variety):

Community College Week, V19-9

My students and I are mentioned in the Bits & Bytes section of Community College Week – VOLUME 19, No. 9. Look for us at the bottom of page 15 (print version, page 14) in the issue download (3.17mb PDF).