This is the main menu for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If you missed the earlier lessons, you should start at the beginning.
Organizing Our Files
When you were little, your mom (if she was like mine) made you eat all your vegetables before you could have dessert. You learned quickly enough that the faster you slammed down those peas or Brussels sprouts, the quicker you’d get the cupcake. Keep that in mind....
We’re about to clean our plates in preparation for the yummy part of the meal. We’re going to make a place to store our graphics, the right way.
Back in Lesson One, we created a folder called mydesign. Up until now, the only thing you’ve done with it is keep your single HTML file in it. That’s about to change. We need to create a file structure on your computer, in which to store your images. Don’t worry, it’s simple.
(Note: This repeats some of the material in the main tutorial page of this site. If you followed along properly, you have already done this and you can skip this section. But I know people skip the introductory stuff and mainline the actual content, so here it is if you need it.)
Go into the mydesign folder now.
(This is the Windows method. From what I read, creating a new folder in the Mac OS is almost identical. If you need a hand, here’s a quick tutorial on creating a folder on your Mac. Or you can just check the material on the main page.)
Now that you’re there, right-click a blank area in the folder. That gives you the “right-click menu.” Choose New.
Choose Folder.
Give your new folder a name. Call it images.
You will keep all of your downloaded images in this new folder. You will also learn to tell your HTML and CSS files how to look in this folder for them.
If you’ve done this, then those veggies are done! Now you’ve got somewhere to put the neato keeno graphics you’re about to put on your site.
This is the best practices method of storing images – in a separate folder. Some designers, both amateur and professional, just stick everything in a single folder. That’s both messy and difficult to keep up with. In later lessons, you’ll see about creating folders for other portions of your Web site, particularly your stylesheet and your JavaScript.
Adding Background Colors and Images with CSS
There are two important parts to adding images and graphics (pictures, drawings, and artwork) to your Web page.
- Adding the right code to your page, and
- Using pictures and images legally.
Many people just grab whatever they want from a Google search or a Web site they like and use it without asking permission. This is illegal. If you use illegally gotten images and graphics on your personal page, the owner of the images and graphics can have your Web site shut down. If you do it as part of a paying design job, you can be fired, and you (and your client) can be sued. So get in the habit of using only legally obtained graphics.
The graphics used on MySpace pages are free to use ... on your MySpace account. Not on your independent Web page. Leave MySpace graphics on MySpace.
Finding Legal Graphics for Your Site
In this lesson, we will use graphics obtained from Web sites that make their graphics free to anyone who wants them. Everything on these sites is free for you to use.
Many people like to use background graphics (sometimes called "textures" or "tiles") to dress up their pages. Here is a site that offers a lot of free background graphics:
http://www.grsites.com/textures/
There are other background graphic sites out there, but I like this one because I know it’s free for us to use, and it has a tremendous amount of graphical content. There’s bound to be something you like in its pages.
Using Background Colors, Revisited
Before we start getting specific with our images, let’s take a look at our first experience with background graphics. It’s in Lesson Two. Remember, we added a boring gray background, then changed it to a color you liked.
Let’s look at the use of background colors in a little more depth.
Using your stylesheet, you can:
- add colors to your entire site
- add colors to a specific page
- add colors to selected elements on a page
- add images to your entire site
- add images to a specific page
- add images to selected elements on a page
That’s a lot we can do! So your first decision will always be to decide what, if any, background designs — colors or images — you want. (This site is deliberately very simple, with no background colors or images used at all.) You will quickly learn that it’s easy to go overboard with colors and/or images; for example, a NASCAR fan might think using a black-and-white checkered background might be cool – it looks like the checkered victory flag – but would quickly see that it’s almost impossible to see anything against such a background. Don’t be afraid to experiment, but remember, first and foremost your site must be easy for people to use. I don’t stick around on sites that make me work to decipher text against glaring or “busy” backgrounds.
Here’s an example of a background that is too difficult for most people to use. I have no doubt that the site owners are sincere in their faith and their desire to share their faith with the world. However, many of the faithful cannot use their site to its fullest because of the “strobing rainbow” background design.
When you use an image, it’s important to remember to give a color to go with it. Some people keep images in their browsers turned off. Or your graphic may fail to load, or the graphic may become corrupted. In those cases, you want a fallback – a color is better than nothing at all.
Let’s see how to do some of the things listed above.
Adding Colors to your Site’s Background
This is the most common, and one of the easiest, ways to enhance your site’s design, by adding a color to your site’s background.
If you like, you can revisit December.com’s Hex Hub for some color choices. Remember, the stronger or brighter the color, the more it will dominate your site. We call it "background" for a reason.
Adding Colors to an Individual Page
If you want to add a color to just one (or a selection) of your pages, one way to do it is to add an ID to your body tag.
Here’s code that would do it. Add this to your stylesheet:
#colordiff {
background-color: #9a32cd;
}
Now replace your HTML body tag with this:
<body id="colordiff">
Now your body color is a rather hideous purple (unless you change it!).
Adding Colors to a Specific Element
You’re getting the idea now. Let’s say you want to put a background-color on a paragraph (a <p> </p> element. Add this class (not an ID if you want to do this more than once in a page) to your stylesheet:
.colordiffp {
background-color: #fffacd;
}
and add this to your HTML page:
<p class="colordiffp>Text to be colorized</p>
Now your paragraph is a lovely lemon chiffon color, until you change it to something that suits you.
Naturally, you won’t do this until you get more than one page on your site….
Adding Images to your Site’s Background
Now we can get to adding that background graphic.
Most modern designs either use an enormous single image as a background (fairly rare) or a single image that “tiles” across the page (think the tiles on the bathroom floor, repeating over and over until the entire space is filled; very common). We’re going to start with a tiling image.
First, go to the GRSites background textures site, and choose a graphic. You can choose from among the different colors, or the other choices (“multicolored,” “brick,” “water,” or whichever category appeals to you). Be prepared to spend some time poring over the images!
Got one? Now that you’ve chosen one (you can change it later if you don’t like it), download it to your images folder. Make sure it ends up in that folder and nowhere else!
The image you download will be one of three kinds: jpg, gif, or png. It is very important to make sure that you call it by its proper extension when you put it in your page. (If you come across a .bmp image, leave it alone. It’s not a widely used image format any more, the files are unusually large, and some browsers won’t display them.)
More about the different kinds of graphics.
When you have the image downloaded, go to your CSS stylesheet.
Add this code to your body element:
body {
background-image: url(images/backimg.jpg);
}
Change backimg.jpg to the name of your background graphic.
This is what your body element will look like now:
body {
background-color: #50a6c2;
background-image: url(images/backimg.jpg);
}
Notice that, unlike most CSS commands, we didn’t use quotation marks in the url value. Also notice how the url value has no spacing.
Like it? Remember, if you don’t like the image, you can change it around. But leave it as it is for now.
Note: Many designers consider using these “tiled” background graphics uncool or flashy. Ross Shannon writes:
Try and avoid using those God-awful free background tiles you can find on the net, or those painfully dull ones that come with Microsoft Office programs. Your site will look horribly cheap. Clever use of a simple background tile can work wonders on the visual impact of your site.
My take is, this is your first site, you use what you like for now. This is a learning process, and we’re having fun, not trying to impress the neighbors (much less the “pros”).
More about using graphics on your Web pages.
Controlling the Background Image’s “Tiling”
There are three main things you can control about your tiling background image:
- choosing if a background will repeat and which directions to repeat in
- positioning the image precisely on the screen
- whether the images moves when the user scrolls the page, or it remains fixed ("static") no matter what the user does
The Background-Repeat Tag
You can control whether your background image repeats on your page. You can have it repeating (copying itself) both horizontally and vertically, horizontally only, vertically only,
Note: The graphic I’m using in the example below was modified from a background "tile" obtained at GRSites.
Here’s the code for the full repeat (the default, which means if you don’t choose any repeating value, this is what happens:
p {
background-image: url(orangebg.jpg);
background-repeat: repeat;
}
And here’s what it looks like (the example is just for the paragraph below)
Watch me tile, baby!
Yowsah!
(Naturally, you want a less dominant background image….)
Let’s see how to make it tile just horizontally.
p {
background-image: url(orangebg.jpg);
background-repeat: repeat-x;
}
gives us
Watch me tile, baby!
Yowsah!
(The horizontal repeat is used frequently with "gradient" backgrounds, a very popular background image technique where the color at the top of the screen is relatively dark, but progressively lightens as the page scrolls downward.)
Here’s how to make it tile vertically:
p {
background-image: url(orangebg.jpg);
background-repeat: repeat-y;
}
gives us
Watch me tile, baby!
Yowsah!
(The vertical repeat is sometimes used to give the appearance of a "left-hand border," like an old illuminated manuscript. This was a very popular technique in the late 1990s and early 2000s, but currently is considered by many to be old-fashioned and clumsy. However, if used tastefully, it can make for a lovely effect.)
You can also have your background image appear only once:
p {
background-image: url(orangebg.jpg);
background-repeat: no-repeat;
}
gives us
Watch me tile, baby!
Um, not so much, actually.
You can also position your tiled graphic to display on a specific point on the page. There are three different ways to position background images: pixels, percentages, and keywords. I won’t go into this heavily right now, but here’s what the code for a positioned image might look like:
p {
background-image: url(orangebg.jpg);
background-position: 20px 10px;
}
which would show a single image (no tiling) at 20px from the left edge of the screen, and 10px from the top of the screen.
Percentages work much the same way:
p {
background-image: url(orangebg.jpg);
background-position: 20% 50%;
}
where the location of the single image would be 20% from the left edge of the screen and 50% from the top of the screen.
The available keywords are: top, right, bottom, left, and center. A possible keyword code for positioning a background image might be:
p {
background-image: url(orangebg.jpg);
background-position: top center;
}
All of these positioning techniques — pixels, percentages, and keywords — have some specific drawbacks. However, knowledgeable designers have made some wonderful sites using these techniques. They take time, effort, a willingness to experiment, and a willingness to make mistakes to learn to use them fully.
Using the "Background" Shortcut
Like some other CSS properties, you can "compress" several background properties into a single "multiple property." This:
body {
background-image:url(images/backimg.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#50a6c2;
}
becomes
body {
background: #50a6c2 url(images/backimg.jpg) repeat-x top;
}
I’m not sure that it makes a difference what order you put them in; this one is sorted alphabetically, with background-color first, then background-image, background-position, and finally background-repeat.
The folks at Tech-Evangelist, whose shortcuts I cribbed, remind us:
Not all related CSS rules can be combined into a shortcut, but many of the most commonly used rules can be condensed into a single line. You do need to be aware that order in which you place the CSS values does make a difference. Also, CSS shortcuts should be tested in a range of browsers because CSS rules are not always interpreted the same. Internet Explorer 6 is very buggy when it comes to rendering CSS rules properly. You should test all style sheet code in all of the most popular browsers...
Digging Into the Code
What does this code actually do? We need to know this, so before we move on to more fun with graphics, let’s look at it.
background-image: url(images/backimg.jpg);
The background-image portion of the element is just what it says: it uses an image for your background.
The url portion of the element tells the browser to go to a specific location to find and display the image.
The (images/backimg.jpg) portion of the element tells the browser what folder to look in, and what image to find in that folder. (Now you see why we created the images folder.)
The ; just brings the element to a close.
