<h1>1.Örnek : Görsel arka plan</h1>
<h2>2.Örnek : Gradient arka plan</h1>
<p class="resim-bg">ADOBEWORD<br><span>PRESS</span></p>
<p class="gradint-bg">ADOBEWORD<br><span>PRESS</span></p>
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,900);

body{background-color:#f0f0f0;text-align:center; width:690px; margin:0 auto;}

.resim-bg, .gradint-bg{
width:250px;
margin:30px;
text-align:center;
-webkit-background-clip: text;
font:bold 30px/35px 'Titillium Web', sans-serif;
}

.resim-bg{
float:left;
background: url('http://www.adobewordpress.com/wp-content/uploads/2013/07/Mona_Lisa.jpg') 21% 21%;
-webkit-text-fill-color: rgba(255,255,255,0.25);
-webkit-background-clip: text;
}
  
.resim-bg span,.gradint-bg span{font-size:60px;}

.resim-bg:hover{background: url('http://www.adobewordpress.com/wp-content/uploads/2013/07/Mona_Lisa.jpg')no-repeat 21% 21%; -webkit-text-fill-color: rgba(255,255,255,0);}

.gradint-bg {
float:right;
background: -webkit-linear-gradient(#222, #666);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

.gradint-bg:hover{background: -webkit-linear-gradient(#222, #666); -webkit-text-fill-color: rgba(255,255,255,0);}

h1{float:left;} h2{float:right;}

h1,h2{
font:13px Courier New,sans-serif; 
color:#333;
width:250px;
margin:10px 30px -20px 30px;}
/*
CSS yazı arka planı için JavaScript yazmaya gerek yok.
You don't need JS for designing CSS text backgrounds.

www.adobewordpress.com
------------------------------------------
Photoshop dersleri, WordPress, SEO, 
HTML5 ve CSS3 gibi güncel konuları ele alan 
Türkçe interaktif eğitim merkezi.
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.