Hide text using css

I have a tag in my html like this:

<h1>My Website Title Here</h1>

Using css I want to replace the text with my actual logo. I’ve got the logo there no problem via resizing the tag and putting a background image in via css. However, I can’t figure out how to get rid of the text. I’ve seen it done before basically by pushing the text off the screen. The problem is I can’t remember where I saw it.


solution

Hiding text with accessibility in mind:

In addition to the other answers, here is another useful approach for hiding text.

This method effectively hides the text, yet allows it to remain visible for screen readers. This is an option to consider if accessibility is a concern.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

It’s worth pointing out that this class is currently used in Bootstrap 3.


If you’re interested in reading about accessibility:

-

Web Accessibility Initiative (WAI)

-

MDN Accessibility documentation