placing an image and text hyper lin over each other - html

Question

I have the code below to display the image and the code as a hyperlink. But I would like the image placed behind the text and person can click on either
<h1>test</h1> <img scr="#"/>

Answer 1

Use CSS to achieve this:
test
Here you can see more info about background-image: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
You have syntax error in your code, you must use <h1> outside the <a> tags, like this:
<h1> test </h1>

Answer 2

You can also use position: absolute so the text will be on the top of the image.
HTML
<a href="#">
<h1>test</h1>
<img src="http://spi3uk.itvnet.lv/upload2/articles/54/542197/images/Jauka-vasara-8.jpg"/>
</a>
CSS
a {
position: relative;
}
a h1 {
position: absolute;
z-index: 100;
color: #FFF;
}
Demo Fiddle

Answer 3

I recommend you to use background:
<h1>test</h1>
But if you want, you can use another variant (negative margin):
<h1 style="height: 24px;">test</h1><img style="margin-top: -24px;" src="..."/>
Or absolute position:
<h1 style="position: absolute; z-index: 9;">test</h1><img src="..."/>
P.S. You have some typos in code: scr -> src and <\h1> -> </h1>

Answer 4

Well, it depends how you'd be using this.
Either set is as a background image instead of adding an img-tag.
But that would mean you'd have to set the height. Otherwise your image would crop.
...or you can set the (wouldn't use h1 in this case for semantic reasons) span with the text to:
CSS
span {
display: block;
position: absolute;
}
and then position it wherever you want inside the image.