I am having problems to set an image as a header background to my title for every page.
I need it to work responsively and to be able to add a darker background on top of it so the title will be easier to read, also the title should remain in the middle of the screen at all times and screen sizes.
I managed to get some work around to do it but it's kind of not a good solution as it puts the image through CSS which cause the image not to be accessible, I can't add an alt or a title tag to it and if a user wants to share on Pinterest for example he will not get the option to pin this image.
How can I get it to work with the image in the HTML itself?
Here is the php code which gets the image:
<?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>
Here is the link to a page for example, any help will be much appreciated, thanks in advance.
Actually what you did is correct. Using CSS to create background image is the way to go.
But, if for some reason you want to go to classic html then what you need is to something like this
<div class="top-image">
<div class="in-table">
<img src="<?=$url?>" id=image />
<h1 class="entry-title"><?php the_title(); ?></h1>
</div>
</div>
then you need to create its css
.in-table {position:relative};
#image {position:absolute; left:0; top:0; width:100%;}
basically to make something as background, you just need to create an absolute position either for the image, OR the title. in my example above, it was the image.