Daina Beth,
Yes, you've done it right!
Alternatively, you COULD keep the title and then pop it up on top of all your other code, and float it down onto the image so it's still readable. It requires a bit more coding than your title image. It's up to you. I see you have given your image a good alternative text field (lotusland chronicles) so screen readers will still read it correctly.
If you want to do the alternative (keep the title and just move it), give this a try (delete from your title the pipe and everything after it, so it just reads "The Lotusland Chronicles"):
.blog-title {
padding-left: 25px;
position: relative;
top: 200px;
z-index: 10;
}
#header {
padding-top: none;
}
You'll have to also upload an image without the text on it, and you'll want to set the font of the title in Dashboard/Appearance/Custom Design/Fonts.
To explain a little bit of what you're doing: the z-index is this interesting attribute that layers your CSS. We tend to think of how CSS/HTML works as a bunch of square boats floating in a rectangle. They can't really overlap, and they force each other to move depending on their own position. The z-index is like a crane that picks up one of the little boats and suspends it over the others. Looking down from above, as we are, we don't see the depth, but we do see thing one item not being affected by the flow of the rest of the page. Z-index should always be used sparingly because it's easy to get muddled.
Good luck!
-Z
dainabeth
