Using a photo as
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>

I'm sorry, I wrote it fast here, it's not copy paste, it's correct on my real document though. I changed it. — Lucas Verhoest, Nov 17 '17 at 11:34
There's no content here in your code that's the reason you need to define some height or width , Otherwise, it will take the height and width depending upon your content or image (whatever you have) — Nawaz Ghori, Nov 17 '17 at 11:40

Nick · Answer 1 · 2017-11-17T12:26:46.587

2

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.

edited Nov 17 '17 at 12:26

answered Nov 17 '17 at 11:35

Nick

422
2
9

I'll try it out, and let you know something. Thanks! – Lucas Verhoest Nov 17 '17 at 11:36

score 2 · Answer 2 · answered Nov 17 '17 at 11:42

2

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>

answered Nov 17 '17 at 11:42

Justinas

41,402
5
66
96

Yes, from the viewpoint of a search engine I do not recommend using h1 tag simply to show an image either. But if you wish to simply set up a background for your actual title text, this solution works great. But do not leave the header tag empty or you should at least specify your page title in `` to improve SEO. – Pepelius Nov 17 '17 at 12:21

score 0 · Answer 3 · answered Nov 17 '17 at 11:35

0

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>

answered Nov 17 '17 at 11:35

Hash

7,726
9
34
53

Oh, this could be it! I'll give it a shot and see what happens! – Lucas Verhoest Nov 17 '17 at 11:37
here there are two different class spantitle and titlespan – Nawaz Ghori Nov 17 '17 at 11:38
@NawazGhori As pointed out in my comment in the OP's question that was a typo introduced by him when he posted the areticle. – Juan Nov 17 '17 at 12:25

Juan · Answer 4 · 2017-11-17T12:04:26.257

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>

Span is quite unnecessary in this situation, as you've only set out some basics like `font-family` and `color`, you could just set these out in `.title` and the result would be the same. — Pepelius, Nov 17 '17 at 12:23
@ProDexorite Sure but the OP in the question asks not to change this — Juan, Nov 17 '17 at 12:25

Using a photo as in CSS

in CSS

4 Answers4

Using a photo as
in CSS