Change graphics

Where are we?

Giles wants a site for nature poetry. Rather than starting from scratch, we found a design we liked. We changed the layout and fonts a little.

This lesson’s goals

In this lesson, you’ll see how to position an image on top of an existing background image.

Graphics changes

Here’s the site so far.

The graphics look fine. Any changes? Let’s check with Giles.

Add my picture

OK.

Here’s what we have:

Template

Figure 1. Template

Let’s try adding Giles’ picture in the lower left of the landscape photo, like this:

The goal

Figure 2. The goal

There are two ways we could do this:

  • Edit the landscape photo with a graphics editor.
  • Make a Giles picture as a separate image, and tell the browser to overlay it on the landscape.

Let’s do the second one. It leaves the landscape image intact.

Making a Giles

First, I need to create an appropriate image of Giles. I’ll start with this:

Original Giles

Figure 3. Original Giles

The image doesn’t have green around it. I just wanted to show you that the image has a white background.

This is what I want:

New improved Giles

Figure 4. New improved Giles

To make the new image, I:

  • With Paint.NET, deleted the background white, turning it transparent. This lets the green show through.
  • With Paint.NET, flipped the image.
  • With Gimp, blurred the edges of the drawing.

I named the new image file dog-head.png.

Renata
Renata

Do we need to know how to do the graphics stuff?

Kieran
Kieran

You should know how to make basic changes to existing images. Some of this is covered in another lesson.

Positioning Giles

We want to put Giles on top of the landscape. First, we need to work out how the landscape is shown. Then we can figure out what to change.

Firebug showed me the HTML that makes the header area:

<div id="header">
  <div id="logo">
    <h1><a href="#">[SITE NAME]</a></h1>
    <h2>[SUBTITLE]</h2>
  </div>
</div>

Figure 5. Header code

Wait. Where’s the <img> tag? You use the <img> tag to show images, right?

Hmm. Let’s check out the CSS:

#header {
  height: 303px;
  text-align: right;
  background: url(images/header.jpg) no-repeat;		
}

Figure 6. CSS for header

Ah ha! There it is in line 4:

background: url(images/header.jpg) no-repeat;

TO make sure, let’s check out header.jpg, in the images directory:

header.jpg

Figure 7. header.jpg

That’s the one. So the design puts the landscape image in header using the CSS background property.

CC
CC

The Giles image file is dog-head.png. The landscape file is header.jpg. Why is one a png and the other a jpg?

Kieran
Kieran

png supports transparency, which we need for Giles. jpg doesn’t support transparency. But that’s OK, because we don’t need it for the landscape.

Read more about that in the image formats lesson.

Having a background makes it easy. We want to put Giles on top of the landscape:

The goal

Figure 2 (again). The goal

We can just drop in an <img> tag for Giles. Because the landscape is in the background, Giles will be on top of it.

OK. I’ll copy the new Giles image (in the file dog-head.png) into the images directory.

I’ll try this and see how it works:

<div id="header">
  <div id="logo">
    <h1><a href="#">[SITE NAME]</a></h1>
    <h2>[SUBTITLE]</h2>
    <img id="giles-head" src="images/dog-head.png" alt="Giles">
  </div>
</div>

Figure 8. New header code

Line 5 is new. Here’s how it looks:

Head showing

Figure 9. Head showing

There’s Giles! Cool!

We need him on the left. How about this:

#giles-head {
  float:left;
}

Figure 10. CSS for the head

Here’s what that looks like:

Head on the left

Figure 11. Head on the left

Not bad! Need to move it a bit, though:

Position head

Figure 12. Position head

Move the image a little to the right, and a little down. CSS margins might work.

How about this?

#giles-head {
  float:left;
  margin-left:8px;
  margin-top:18px;
}

Figure 13. New code

Here’s the result:

The goal

Figure 2 (again). The goal

W00f!

Renata
Renata

In Figure 13, how did you figure out that you needed 8px and 18px?

Kieran
Kieran

Trial and error. I plugged in different numbers until it was right.

Here’s the current site.

Exercise: Blue Sin graphics

Remember Blue Sin?

Add an image to the header, in this position:

Header

You can use this image, or another:

Dog

Upload your solution to your server, and enter the URL below.

(Log in to enter your solution to this exercise.)

Summary

  • Giles wanted his picture on the page, on top of the landscape photo.
  • We made a new picture.
  • We looked at the existing code to work out how the landscape photo was being shown: in a CSS background property.
  • We put an <img> tag in the header.
  • We floated it left, and messed with the margins until it was right.

What now?

We’ve finished with the look-and-feel changes to the template.

W00f! W00f!

Now we’ll add some standard content, like the site name, and links to the about and contact pages.


How to...

Lessons

User login

Log in problems? Try here


Dogs