Using a photo as <h1> in CSS

Question

In my school, they said this was the way to go if we used an image as a title with a special font for ex. Now, I'm trying this but I don't really understand

1) why you should do it

2) it doesn't seem to show up unless it is given a specific height.

Can someone show me a better way to do it, while still doing this <h1><span></span></h1> thing?

.title{
  background-image: url(...);
  background-repeat: no-repeat;
  /*it displays nothing now, only when I add a height here*/
}

.titlespan{
  visibility: hidden;
}

<h1 class="title"><span class="titlespan"></span></h1>

Answer 1

If you want display an image instead of the text, that's enough for you:

h1 {
  background-image: url(...);
  background-repeat: no-repeat;
  width: 100px /* Image width */;
  height: 25px /* Image height*/;
  text-indent: -9999px; /* This hide text*/;
}

<h1>Title</h1>

This technique is used to have a "SEO Friendly" text for the search engines, showing the user an image.

Answer 2

As long as there is content it will work, or you will have to give a height/width

.title{
  background-image: url(https://media-exp1.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png);
  background-repeat: no-repeat;
  /*it displays nothing now, only when I add a height here*/
}

.titlespan{
  visibility: hidden;
}

<h1 class="title"><span class="spantitle">a</br>a</br>a</br>a</br>a</br>a</br>a</br></span></h1>

Answer 3

You should not use h# for image only as these tags has special meaning. E.g. h1 means Title of the page.

And yes, if you have only image as background, then you must set element dimensions (width is set to 100% by default for all block elements).

I would use simple div for that (another option would be <img> tag that will auto-resize to source dimensions):

#title {
  height: 50px;
  background: url('http://via.placeholder.com/50x50') repeat-x center center;
}

<div id="title"></div>

Answer 4

I'm a student and in school they said this was the way to go if we used an image as title with a special font for ex.

Using an image with written text to replace a title in this way is not a good idea because the text (image text) may be seen differently on different screens due to dimensions and resolution.

The approach seems right if the image is only the background. And the text is completed inside the <span> tags, which in turn are made visible instead of hidden.

And the special font can be set for the h1 or the span in CSS. (In the example a font is linked from google fonts in the html)

.title{
  background-image: url(https://png.pngtree.com/thumb_back/fh260/back_pic/00/05/81/6456279a0080dd1.jpg);
  background-repeat: no-repeat;
  text-align:center;
}

.titlespan{
  font-family: 'Crimson Text', serif; 
  color:white;
  
}

<link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet"> 
<h1 class="title"><span class="titlespan">This is the title</span></h1>