Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us info@westciv.com.

style master css tutorial

Creative use of images

In this section you will learn

  • the height property
  • the background-repeat property
  • the background-position property
  • the padding property

Project goals

  • To add a little bit of dynamism and interest to the design through creative use of images.
  • To make the text in #header and the #main-text look better by adding some space between the content and the border of the element.

<< 9. page layout | 11. descendent selectors >>

While you'll have to admit it's showing potential, you're probably also thinking the page still has a bit of work to be done on it. All true, but don't forget to give yourself a pat on the back for all the things you've already learned and put into practice. Let's leave the navbar for the moment, we'll come back and style its contents last of all. For now, we're going to go back and put in those images that we talked about earlier.

Open index.html and have a look at what's in between #header and #content. You should find two <div> elements, with the ids outer-image and inner-image. You should also see that inner-image is completely contained by outer-image, but that there is no actual content in either of them: that's why you can't see them on the page at the moment. However, if you give an element a background-image, and a height then it will appear on the page regardless of the fact that it has no real content. That's what we're going to do now.

Exercise 41

Create two new statements with id selectors, one for outer-image and one for inner-image. Style Master users will find these two are already in the style sheet.

#outer-image {

}

#inner-image {

}

We create the effect you see on the finished page using two separate images, called outer-image.jpg and inner-image.jpg.

Exercise 42

Copy the images below into the images folder you created before.

Background Image

Figure 13: Background image for #inner-image

Background Image

Figure 14: Background image for #outer-image

With CSS you can attach a background-image to any element, not just the <body>. This simple fact opens up a whole world of design possibility. I mentioned before though that you need to give the element a height so that it will actually be drawn on the page and any background-image you give it will be seen.

The height property

As you might have guessed, height is similar to width, and takes the same sorts of length values. Again here, we're going to work with pixels. We want to make each of these two elements the same height as the images they are going to display, which is 199 pixels.

Exercise 43

Attach the images as described above and give the elements the appropriate height value at the same time. Can you remember the form for the background-image property? Check back to the body statement.

The height property is on the Page Layout Editor, just below width.

Remember, attaching a background-image is easy: just click the folder on the Background Editor and locate the image you want to use.

Check it out in the browser to make sure you've got the image locations right and don't panic: a couple of new background properties will make it all fall into place.

#outer-image {height: 199px;

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

}

#inner-image {height: 199px;

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

}

The background-repeat property

Before, on the <body> we used a small background image that simply tiled to fill the whole element and therefore covered the whole page. But this isn't the only way we can use a background image. The background-repeat property has a number of values that let you make the image tile in different ways.

Exercise 44

Make the background image on #inner-image appear only once.

The background-repeat editor is also on the Background Editor.

To make the image only appear once

1. set the background-repeat popup menu to no-repeat.

#inner-image {

...

background-repeat: no-repeat;

}

Starting to get the picture?

The background-position property

The background-position property can take quite an elaborate range of values, but its essence is really straightforward and intuitive. All you need do to start experimenting with it is specify 2 values: the first for where you want the image to be horizontally, the second for where it will be vertically. You can use the length values we have already used many times, so for example the following

background-position: 50px 100px

will place the left of the image 50px from the left of the element, and the top edge of the image 100px from the top edge of the element.

There are also keyword values. You can use any combination of the following:

A few examples will make it all clear.

We're going to use length values for one of these elements, and keywords for the other.

Exercise 45

Apply the background-position property, with length values, to #inner-image so that inner-image.jpg appears 198 pixels from the left edge of the element, but flush with its top. Where have we seen that 198 pixels before?

To place the image 198 pixels from the left and flush with the top

In the background-position section of the Background Editor

1. set horizontal to 198px

2. set vertical to 0px

#inner-image {

...

background-position: 198px 0px;

}

Now, the need for the next thing we do might not be immediately apparent, though I think you'll agree when you've done it that the whole design is a lot more dynamic. Remember those keyword values above, especially center? If you think about it, where the actual center is will change according to the width of the page. So, if you set the horizontal component of background-position to center, as the page width changes, the center will move, and so the image will move. Remember too that this image is repeating as well, so what will happen is that background-position will specify where the first instance of the image appears, and then all the rest tile out from there.

Exercise 46

Apply the background-position property, with keyword values, to #outer-image so that outer-image.jpg tiles from the middle of the top of the element.

To place the image in the center at the top

In the background-position section of the Background Editor

1. set horizontal to center

2. set vertical to top

#outer-image {

...

background-position: center top;

}

And when you check it in the browser this time make sure you see the effect when you change the width of the window - pretty nifty design isn't it?

What do you think of that technique? Admittedly it's something that will appeal more to designers than to web standards purists, relying as it does for appearance on those otherwise redundant elements you need to have in the HTML, #outer-image and #inner-image. But the direction you take here is entirely up to you. For myself I see this as a lightweight way to create a nice looking design, and at the same time learn a little bit about some more CSS properties.

The page is looking pretty good at this stage, apart from the navbar, which we're going to do as a separate exercise shortly. Before we do that let's make sure everything else on the page looks just right. One thing that I know will be concerning you at the moment is the way the text is sitting hard up against the border, both in the #header and the #main-text.

The padding property

Just as margin is the distance between the edge of an element and its adjacent elements, padding is the distance between the edge of an element and its content. It's the property you need to put a bit of space between the text and the border. It's a really easy property to use, taking the same sorts of values we've seen for margin. As well, you can apply padding to every edge of an element at once, or to each edge individually. The complete set of padding properties are

Exercise 47

Put a 10 pixel padding on every edge of #main-text.

Margin and padding are actually on the same editor, with padding at the bottom.

No problem? I didn't think so.

#main-text {

...

padding: 10px;

}

Now let's make the text in the #header really stand out by putting some whitespace around it.

Exercise 48

Give the #header a left and right padding of 125 pixels and a top and bottom padding of 10 pixels.

So when you're done the #header statement should look like this.

#header {

...

padding-left: 125px;

padding-right: 125px;

padding-top: 10px;

padding-bottom: 10px;

}

Those of you previewing in Safari will have noticed an added bonus of applying that padding to #header and#main-text: that additional space between the elements is now gone. There's no good reason for this - it's just a rare layout bug in Safari.

Next

We're going to take a quick diversion and make a minor tweak to the text in the #header, at the same time learning about an important new selector.

<< 9. page layout | 11. descendent selectors >>

Style Master CSS Editor

Web Directions Conference