Hide text in H1 tag but not the image

Question

I need to hide the text inside a H1 tag. But not the image. Problem is that i only can change the css and not the html

<h1>
<img src="img/headerimg.png" width="900" height="125"/>
Header 1 text
</h1>

Is there a way to only hide the "Header 1 text" with only css? I'm doing this for big client and they gave me only acces to the css file.

_Very_ hacky, but you could set the text colour to the background colour? — Bojangles, Oct 13 '12 at 13:09
You could try change the color of the text the whatever the background color is. — thescientist, Oct 13 '12 at 13:09
I provided a one line CSS based answer that doesn't require touching the markup at all. — thescientist, Oct 13 '12 at 13:18
use `text-indent: -999em;` this will help screen readers to read the text instead of using `display: none;` — Mr. Alien, Oct 13 '12 at 13:18
possible duplicate of [Hide text using css](http://stackoverflow.com/questions/471510/hide-text-using-css) — blo0p3r, Apr 16 '15 at 14:51

score 8 · Accepted Answer · answered Oct 13 '12 at 13:12

8

Give a 0px font size

h1{ font-size:0px }

Edit: Working sample

answered Oct 13 '12 at 13:12

hkutluay

6,794
2
33
53

In Opera Browser the text is still visible, very small but still visible. – wzazza Oct 13 '12 at 13:36
1

h1{ font-size:0px; color: rgba(0,0,0,0) } This will also make the font invisibile. The element is still in the DOM and has an effect on other surrounding images. The only good solution is to change HTML. – Hendrik Oct 13 '12 at 15:43

Markus Unterwaditzer · Answer 2 · 2012-10-13T13:15:47.027

5

Set the image as background of the <h1>, add CSS properties to the <h1> to make it the size of the image and use a negative text-indent on the headline to remove the text. That would be the usual and ideal way to do it if you had access to the html too.

Since you only have access to the CSS, you can use this:

h1 {
    font-size: 0.1px; /* 0 gets disregarded by Internet Explorer, 0.1 gets interpreted right by every browser */
}

Fiddle: http://jsfiddle.net/VGgnD/

edited Oct 13 '12 at 13:15

answered Oct 13 '12 at 13:10

Markus Unterwaditzer

7,992
32
60

but the img tag will still be in the markup. As the OP said, he only has access to the CSS file, so you will have to additionally hide the image too. – thescientist Oct 13 '12 at 13:11
@thescientist use `H1 img { display: none} ` – haynar Oct 13 '12 at 13:13
1

right, that's what I was getting at. But Markus might want to update his answer to meet all the OP's requirements. – thescientist Oct 13 '12 at 13:13
I added a completely different approach, in the end it shouldn't matter. – Markus Unterwaditzer Oct 13 '12 at 13:17

Praveen Kumar Purushothaman · Answer 3 · 2012-10-13T13:16:54.053

3

You can do this way using CSS:

<h1>
    <img src="img/headerimg.png" width="900" height="125"/>
    Header 1 text
</h1>

CSS:

h1 {
    width: 900px;
    height: 125px;
    background: url("img/headerimg.png") no-repeat center center;
    text-indent: -99em;
}

If you have access only to CSS, please display: none; the img:

h1 img {display: none;}

Working Fiddle: http://jsfiddle.net/sJ8JD/

edited Oct 13 '12 at 13:16

answered Oct 13 '12 at 13:10

Praveen Kumar Purushothaman

164,888
24
203
252

1

he has an access **only** to CSS as he said – haynar Oct 13 '12 at 13:13
@haynar Fixed. Done. Added fiddle.! :) – Praveen Kumar Purushothaman Oct 13 '12 at 13:17

score 1 · Answer 4 · answered Oct 13 '12 at 13:12

Well the only thing that comes to my mind is this:

<h1 style="color: transparent; font-size: 0px; text-indent: -99em;">
<img src="http://pokit.org/get/img/18d5148ef77ef2a2d5d8193c1c8789e8.jpg" width="900" height="125"/>
Header 1 text
</h1>

Working example:

http://jsfiddle.net/VRQVs/2/

score 0 · Answer 5 · answered Oct 13 '12 at 13:10

0

set font-size: 1px !important; and set background color as text color

answered Oct 13 '12 at 13:10

haynar

5,961
7
33
53

The text is visible like flycrap then, but still visible. – Markus Unterwaditzer Oct 13 '12 at 13:11
@MarkusUnterwaditzer even with the same color as background? – haynar Oct 13 '12 at 13:12
1

Depends on what the background is. Maybe it's an animated gif? :P – Markus Unterwaditzer Oct 13 '12 at 13:18

wzazza · Answer 6 · 2012-10-13T13:22:06.373

0

You can try position:absolute; so the text won't be visible, it will be positioned outside the page. -5000px

h1 {
  margin-top:-5000px;
  position:absolute;
}
h1 img {
  position:absolute;
  margin-top:5000px;
}

Example

edited Oct 13 '12 at 13:22

answered Oct 13 '12 at 13:13

wzazza

803
2
11
19

score 0 · Answer 7 · answered Oct 13 '12 at 13:17

0

It could be as simple as setting the font-size to 0px

h1 {
   font-size: 0.1px;
}

http://jsfiddle.net/m5V2A/

answered Oct 13 '12 at 13:17

thescientist

2,906
1
20
15

Lol yeah, text is selectable! :P – Praveen Kumar Purushothaman Oct 13 '12 at 13:22
1

Lolz, my work is to fix IE bugs in my office! :( Think of my situation! That too for enterprise applications! It is... ... ew... – Praveen Kumar Purushothaman Oct 13 '12 at 13:23

Hide text in H1 tag but not the image

7 Answers7

You can do this way using CSS:

CSS:

Working Fiddle: http://jsfiddle.net/sJ8JD/