Learn CSS – Part 5: CSS Background Image

The previous CSS articles dealt mostly with adjusting copy by underling, bolding, Capitalizing Letters, and many other forms of textual transformations. We now venture into the visual arena of web design. A website looks more pleasing and interesting when images and colors are added and allows the user to take a break from reading.

Learn CSS: Background-Image

Learn CSS – Part 5: CSS Background Image Properties

The background property has five assets that are used to place an image either on your page or as part of your webpage background. It holds the properties for the image itself, whether it repeats across the page or not, gives a color for the background of the page, and its position on the page.

Here are the commands with their functionality, and the last line shows how it would work if you wanted to set the background properties for the body tag, <body>, using all of the properties at once:

background-image: url (/images/photo.jpg);

background-color: #F00;

background-repeat: no-repeat;

background-attachment: fixed;

background-position: left top;

Example:
<style type=”text/css”>

body {background: #F00 url(/images/photo.jpg) repeat-x fixed left bottom;}

</style>

Learn CSS – Part 5: CSS Background-Image

The image tag (<img />), discussed in HTML Tags – Part 4: The HTML Image Tag, explains how to add an image within the textual content of your site. The background-image property in CSS will help you add an image to the background of your webpage.

Here is the property and an explanation of how it works:

background-image: url (photo.jpg);

URL stands for Uniform Resource Locator and that helps pinpoint the location of the image you want to use. The location of your images should be on your hosting server or a location where it can be easily accessed and viewed by your audience.

Photo.jpg will be the name of the image you want to use. It can have any name you wish as long as there are no spaces within the name and it has one of the following extension:

JPG/JPEG – Joint Photographic Experts Group: photos of actual objects like a person or an animal

GIF – Graphic Interface Format: usually images that have varying shades of color and can show images with a transparent background

PNG – Portable Network Graphics: a higher quality format for images with transparent backgrounds.

NOTE: Best method for naming your images is to name it based on what it is. Having photo1.jpg or articleImage.jpg are non-descriptive.

Learn CSS – Part 5: CSS Background-Color

Sometimes having a color for your background is all you need to make your site look appealing. The background-color property will simply add a color to your background by either typing in the name of a color (red) or use a hexadecimal color value. The latter method is preferred since you have more control of what particular color would be seen.

background-color: #F00;

Background-Color Code and Preview

The hexadecimal color value, depending on the chosen value, can be written with three characters (#F00 = Red) or the full six characters (#ADFF2F = Green Yellow). The prior example, #F00, would look like this when written out as six characters:

#FF0000

If you see a value that has three characters and want to show all six, then double each character and you’ll get the same results.

Learn CSS – Part 5: CSS Background-Repeat

When designing your site in Adobe Photoshop, you might feel that it would look best with a repeated background pattern. The background-repeat will continue to repeat an image either horizontally, vertically, in both directions, or not at all:

background-repeat: repeat-x; (horizontal)

Background-Repeat Example

background-repeat: repeat-y; (vertical)

Background-Repeat-Y Example

background-repeat: repeat; (horizontal and vertical)

Background-Repeat Example

background-repeat: no-repeat; (shows the image once at the top left of the page)

Background-Repeat No-Repeat

Learn CSS – Part 5: CSS Background-Attachment

There is a pretty cool effect that you can do with your background when it’s attached to the background of the page. If the value for background-attachment is fixed, then when you scroll the page, the background will stay put while the content will move. The values are either fixed or scroll.

Learn CSS – Part 5: CSS Background-Position

Where you place your image on the page will have a great effect to the content you are writing. The background-position has five values but only two can be used at the same time. They are left, center, right, top, and bottom. Here are three tables to demonstrate how an image would look using these combinations:

Background-Position Example

You could use whole numbers which would represent pixels and position the photo exactly where you want or use percentages. Below is an example using pixels and percentages.

Background-Position Using Percentages

Any one of the three methods are OK to use. Taking time to experiment will make you more efficient with its use.

Your Thoughts On Learning CSS

As I wrap up this article, I want to get your thoughts…

If you read about the <img /> tag, which method of adding images to your page would you prefer and why? Leave a comment or question on my Facebook Page.