使我的标题图像易于访问和用户友好

我在为每个页面的标题设置一个图像作为标题背景时遇到了问题。

我需要它的工作响应，并能够在它的顶部添加一个较暗的背景，这样标题将更容易阅读，也标题应该保持在屏幕的中间，在任何时候和屏幕大小。

我设法得到一些工作来做到这一点，但这不是一个很好的解决方案，因为它把图像通过CSS导致图像无法访问，我不能添加alt或标题标签，如果用户想在Pinterest上分享，例如，他将无法获得固定此图像的选项。

我怎么能让它在HTML本身的图像工作?

下面是获取图像的php代码:

<?php
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
    $url = $thumb['0'];
?>
<div class="top-image" style="background-image:url('<?=$url?>')">
    <div class="in-table">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </div>
</div>

这里是链接到一个页面为例，任何帮助将不胜感激，提前感谢。

http://didyouknowfacts.org/animals/

<div class="top-image">
<div class="in-table">
    <img src="<?=$url?>" id=image />
    <h1 class="entry-title"><?php the_title(); ?></h1>
</div>
</div>

.in-table {position:relative};
#image {position:absolute; left:0; top:0; width:100%;}