do not display text in div of background-image

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 do not want the text to display, how would I go about doing that?

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 your background image, anyway. This is a very portable solution.

Answer 2

you could also use:

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

which just moves the text to the left of 9999px and well you don't have anything else to change in your current class

Answer 3

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

I don't think you're supposed to have uncontained text inside a div.

It's not quite clear what you're trying to do. If you're just trying to comment the div, use an HTML comment.

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