Do not display text in background image div

Question

I have this div:

<div class="inauguration-image"> I do not want this text to display, just here for description </div> 

Here is the css for it:

 .inauguration-image { margin-top:5px; margin-left:auto; margin-right:auto; background: url("/images/inauguration_block.png") no-repeat; position:relative; width:760px; height:552px; } 

I don’t want the text displayed, how would I do it?

Answer 1

 .inauguration-image { margin-top:5px; margin-left:auto; margin-right:auto; background: url("/images/inauguration_block.png") no-repeat; position:relative; width:760px; height:0; padding-top:552px; overflow:hidden; } 

Setting height:0 and overflow:hidden hides your text; padding-top:552px makes the element large enough to display a background image. This is a very portable solution.

Answer 2

 <div class="inauguration-image"> <p style="display:none"> I do not want this text to display, just here for description </p> </div> 

I do not think you should have unconfirmed text inside a div.

It is not clear what you are trying to do. If you are just trying to comment on a div, use the HTML comment.

 <div class="inauguration-image"> <!-- I do not want this text to display, just here for description --> </div> 

Answer 3

you can also use:

 .inauguration-image{ .... text-indent:-9999px; } 

which just moves the text to the left of 9999px, and you have nothing to change in the current class

Answer 4

Using a font size of 0px will make the text invisible to the eye. For instance:

 .inauguration-image { margin-top:5px; margin-left:auto; margin-right:auto; background: url("/images/inauguration_block.png") no-repeat; position:relative; width:760px; height:552px; font-size: 0px /** Fontsize of 0 makes it invisible */ }