CSS Background Image Replacement Tutorial

In this CSS tutorial we learn how to replace HTML text with a CSS background image.

Follow LearnWebCode on Twitter for resources and updates:

[nguyenhoang]

use this for replace images background: font-size: 80px;
font-weight: 1000;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2), color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );

[HBCult]

Do you always need to be specific on the width of a picture? Or is there a default setting with CSS for this?

[gucswtg]

Do you have a link where I can learn to make an ugly header like that. I like to learn the multi-color lettering technique.

[trollerjesus]

is it better to use jpg or png?
I thought I could only make image transparent background with png 

[TheRoxasth]

What is the purpose behind the rule "Display: block" ?