Hi there,

I'm new here, have had a lot of questions over the past 24 hours... Learning so much!

Based on http://www.mrwindupbird.com/

The little grey skull to the left of "mrwindupbird" text in the graphic header.... I want the grey skull to be more vertically centered compared to the text. I have tried valign=middle to the IMG tag as well as adding vertical-align: middle to the GFXHeader section in CSS... I even tried manually adding pixels to the top of the grey skull PNG file but that only pushed the text down to line up with the bottom of the graphic.... (if you use your mouse to highlight the graphic and the text you will see what I mean)

Any ideas? Thanks guys!

Don't add extra pixels to an image, that just makes the file size larger.

In this case, I don't consider that graphic to be content, so it shouldn't be in the HTML. Set it as a background image in the CSS. The 80 and -3 are placement, adjust how you want it.

.gfxHeader h1 {
  background: #000 url(../images/greyskull.png) no-repeat 80px -3px;
}

You might find this helpful - http://www.w3schools.com/Css/default.asp

hmmm, tried that and various other incarnations of the background tag (e.g. background-image:url()) but couldn't get it to work...

Make sure it's below line 135 in layout.css since the background is being specified there for .gfxHeader h1 & a#big.

or take background out of 135 and specify it separately for a#big and .gfxHeader h1

.gfxHeader h1 { 
background: #000 url(../images/greyskull.png) no-repeat 80px -3px; 
}
a#big {
background: #000
}