How to keep <img> over text, without hiding the text and using CSS background or text-indent?

See js fiddle here http://jsfiddle.net/Ws8ux/

Is it possible to keep the text under logo 开发者_Python百科without hiding it using display:none or text-indent? I want to bring the image up and keep logo behind it. Like is PSD layers. And Don't want to use Logo Image as a CSS background

<a href="/" title="Return to the homepage" id="logo">
  <img src="http://lorempixum.com/100/100" alt="Nike logo" />Logo Text
</a>

---

Like this (fiddle)?

HTML:

<a href="/" title="Return to the homepage" id="logo">
    <img src="http://lorempixum.com/100/100" alt="Nike logo" /><span>Logo Text</span>
</a>

CSS:

a { display: block; position: relative; }
a span {
    display: block;
    position: absolute;
    top: 40%;
}

---

What's the purpose of keeping the text if it's to be hidden? If your goal is to hide the text underneath the image for the purposes of accessibility, you may be interested to know that most search engines won't fault you if you just leave the text as an alt attribute on your image. In contrast, you might find some techniques for deliberately hiding content could prove detrimental to your cause.

If it's important to have both the image and text present, you may want to try wrapping the text in a <span>, using an accessible style on that and then disabling it in your print stylesheet.

---

@jitendra; may be you have to play with css:

CSS:

a { position:relative; }
img { position:absolute; top:0; left:0 }

HTML:

<a href="/" title="Return to the homepage" id="logo">
  Logo Text<img src="http://lorempixum.com/100/100" alt="Nike logo" />
</a>

check the fiddle may that's help your http://jsfiddle.net/sandeep/Ws8ux/11/

---

You can do this by setting position: absolute for the image. You should probably also make sure the anchor is the same size as the image, so that it doesn't break the layout of other elements on the page.

img {
    position: absolute;
}

a {
    display: inline-block;
    height: 100px; 
    position: relative;
    width: 100px;
}

The updated fiddle: http://jsfiddle.net/Ws8ux/7/