Reply To: Placing Text Question

[Atelierbram]

I want to use the H4 text to display the photo caption as opposed to having that text as part of the actual image file

In this case having this photo-caption being part of the image might not be such a bad thing, for it has little meaning for when the image isn’t visible (or for visually impaired people depending on screenreaders).

I have managed to get H1 and H2 working fine and they display the site name and the smaller text beneath

They are positioned absolute, but this is not really necessary when you put the image as a background-image in stead of inline.

My fork of your homepage layout

In the demo I did clean up some of the code.

When you use padding and margin to position those h1 and h2 elements, then maybe you can use absolute positioning to style the h4, if you really think this is needed. As I wrote before, I think it’s fine having it as part of the image.

But maybe you can do something like:

<h4><span class="visuallyhidden">Inverness Men's Shed is next to</span> Kessock Bridge</h4>

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}