Typepad Master Class: Layering Header Text Over an Image

In this Master Class we're offering a tip for making a header and related image work together. This can be used across multiple types of blogs, and multiple types of content. Think giveaways, fashion, photography--you name it, we're sure this tip can be used in some way to grab a reader's attention.

Headers are used to do just that--grab attention. In blogging, images are often used to the same end (e.g. to break sections of text up with a relevant image, to showcase an item(s), to just look pretty--the list could go on). Our class today blends the two together, with the goal to keep it simple, keep it effective, and keep it attractive (SEA; look at us making up cool acronyms!).

The tools we'll need to use are:

• a short header
  set to 'Header 2' (or whatever is your preference) in the formatting section of the compose editor
• CSS
  not quite drop-in and go, but mostly
• relevant image
  the less fussy/busy the image, the better, but it's all about what its purpose is and what's effective

For our example, we're going to use an image that will head the start of a post about exploring a small forest. The image is relevant to the post and will act as head to the rest of the content since it's the beginning of the journey. We'll use the header, "The Small Forest," so it has a storied effect. It all ties in together!

The Setup
The first step is to compose a draft of your post, inserting the header first, then the image. Those things must be first in the post, with the rest of the content below. This is important since the styling added later requires specific positioning of the header text in relation to the image placement.

Highlight your text then select the Formatting option
(seen above in yellow) to set your Header format

Without any styling, the beginning of the post would look like the following when previewed:

The Style
The second step is adding the CSS. You can copy and paste what we provide below, but we really recommend considering important factors about the text and photograph. Try to strike a balance, remembering to keep it simple. Since our image is heavy on soft focus, with one prominent thing in focus that is in the left half of the photo, we're going to setup our positioning so the header is placed in the right half.

We chose to use the Header 2 formatting option for "The Small Forest", so in our code we'll want to make certain we apply it to the <h2> tag.

note: there are multiple ways to apply this CSS, but since this is more special occasion in our example, rather than a reoccuring theme/content, we'll be placing this directly into our post's code in the HTML tab.

The CSS properties and values we'll be adding are the following:

position: absolute;
top: 60px;
right: 40px;
padding: 80px 20px;
text-align: center;
color: rgba(0,0,0,0.5);
font-variant: small-caps;
background-color: rgba(255,255,255,0.5);
border-radius: 50%;

The first three items focus on setting the position of the text in relation to the image. Since the image sits below the text, and we want the text to sit on top of it, the absolute positioning gives us better control over where it's placed. The top and right distinctions are to tell where, in relation to the top and right side of the entry's boundaries the text should sit.

The next four items are all about the font--its spacing, alignment, color, and style. The padding helps position the text vertically and, as you'll see later, create the space for the border-radius. The alignment is set to center, while we use an RGBA value for the font color so that we can set an opacity on it (this is a stylistic choice for our image and text; you can use a hexadecimal if you prefer). The last item is to set the header to small-caps, rather than leave it as its entered. You can omit that line if you prefer total control over your capitalization.

The second to last item is the background color behind the text, so that it stands out. We chose to use an RGBA value as well. The 0.5 at the end of both RGBA values denotes that we want the opacity level set to half the full strength, or 50%. This leaves it bright/dark enough to attract attention and read, without overshadowing the image. (Here's a time-saver for figuring out the RGBA value you may want: CSS3 Maker - RGBA.)

Remember: Simple; Attractive; Effective. The goal isn't to obscure or detract from the photograph, nor the header text, but to let both be what they are in harmony together, working together.

Finally, the last item is the border-radius property, which we set to 50%. The 50%, plus the padding we chose, helps force that background-color property to become a circle. You could leave this off, or use a border-radius generator to come up with additional ways to style it, but we wanted a classic circle to offset the square format of the image. The same settings for every post wouldn't necessarily work, since header text can vary in length, so you may need to adjust the padding and border-radius to get the desired effect.

Again, our example is for a simple occasion type post, so this CSS isn't something we need to add to our Custom CSS or Stylesheet for everyday use. Because of that, we're going to add the CSS inline with the <h2> tag.

To do that, we'll click the HTML tab of the compose editor for our post. Since the header should be the very first thing in the post, it'll be the very first thing in the code as well. Place the cursor just after the number in your header. Ours will is <h2>, so we'll place the cursor just after the 2.

Next, we'll add a space, then type style="" (that's two quotation marks). In between the quotation marks, we place our CSS that we shared above, but it'll be all in a single line, like so:

<h2 style="position: absolute; top: 60px; right: 40px; padding: 80px 20px; text-align: center; background-color: rgba(255,255,255,0.5); color: rgba(0,0,0,0.5); border-radius: 50%; font-variant: small-caps;">

In context with our header text, it'll look like this:

<h2 style="position: absolute; top: 60px; right: 40px; padding: 80px 20px; text-align: center; background-color: rgba(255,255,255,0.5); color: rgba(0,0,0,0.5); border-radius: 50%; font-variant: small-caps;">A small forest</h2>

The Result

Simple. Effective. Attractive. And done!

We always recommend trying new design elements, even on a post-only level, in a test blog. If you don't have one, learn how to create a test blog so that you're certain the overall effect of this Master Class tip works with your design and post content.

Like what you learned here? Have you tried it out and want to share your efforts with us? Leave a comment on this post! If you've tried all you can think of to try, and have hit a rough patch with the code, feel free to open up a ticket at Help > New Ticket and we'll work with you to get this tip setup.