Make the text part of a div transparent - html

Question

I need to find a way to view the image behind a div through the text in the div:
E.g.
I have the font as a web font. Is this possible without having to do image replacement?

Answer 1

One of the ways to accomplish your specification using only CSS is to overlap the two background images perfectly thereby creating a "transparent" effect that you've described. Here's a fiddle: http://jsfiddle.net/v780v1Ln/.
Note: paddings and such alter the dimensions of the element and affect the coordinates that must be set for background images.
HTML:
<div id = "wrapper">
<h1><span>DRD</span></h1>
</div>
CSS:
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
background: #e2e2e2;
}
#wrapper {
position: absolute;
width: 70%;
height: 50%;
top: 25%;
left: 15%;
background: url(http://i58.tinypic.com/2vdieso.jpg)
no-repeat
0 0/500px 362px;
}
#wrapper > h1 {
background-color: #fff;
text-align: center;
position: absolute;
padding: 0 55px 0 25px;
top: 25px;
left: 25px;
}
#wrapper > h1 > span {
font: bold 70px/1 Sans-Serif;
text-transform: uppercase;
background: url(http://i58.tinypic.com/2vdieso.jpg)
no-repeat
-45px -25px/500px 362px;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

Answer 2

this worked for me and my project. by stacking the images on top of each other I was essentially able to mirror them even when the position of the box may change
background-image: url("background.jpeg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;