Display Text Over Image Using Custom Fields

  • I’ve created custom fields for text and need to add a background image to each text field so i’ve created another custom field for the image.

    The only problem is, the text displays before or after the image and i need it to display over the image.

    $one = get_post_meta( get_the_ID(), 'field_1_text', true );
    if( ! empty( $one ) ) {
    echo '<div class="custom-field-text"><div class="wrap">'. $one .'</div></div>';
    }

    $image_one = get_post_meta( get_the_ID(), 'field_1_image', true );
	if( ! empty( $image_one ) ) {
	echo '<div class="custom-field-image">' . wp_get_attachment_image( $image_one, 'full' ) . '</div>';
    }

    The template i’m building has 7 areas for custom field content and will be used on dozens of pages on each site.

Viewing 1 replies (of 1 total)

  • Some CSS would do that, if your code already outputs elements. Give the image an absolute position, or position the text..

    Example:

    <style>
img { position: absolute; }
h2 { position: relative; z-index: 1; }
</style>

<div>
	<img src="https://secure.gravatar.com/avatar/492c676a9addf05cd6f0724138a5b687?s=250" alt="gravatar">
	<h2>Just a heading</h2>
</div>

    Trouble doing it? give us a link to a post where you got the image and text to show, but the text displays before or after the image..

Viewing 1 replies (of 1 total)
  • The topic ‘Display Text Over Image Using Custom Fields’ is closed to new replies.