How to make “see through” text?

Question

I have body with a background-image and a div with background-color as white.

I\'m trying to make the text on tha

Answer 1

Try clipping for your #content, assign the same background file (needs to be repositioned eventually):

#content {
 color: rgba(255,255,255,.5);  /* Fallback: assume this color ON TOP of image */
 background: url(image.jpg) no-repeat;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

Source: http://css-tricks.com/image-under-text/

Answer 2

What you're trying to achieve is possible with CSS. With background-clip: text, you can use a background for the text but you will have to align it with the background of the page.

Here's an example:

body {
  background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat;
  margin: 10px;
  background-position: center top;
}
h1 {
  background-color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-align: center;
  padding: 10px;
  font-weight: bold;
  font-family: arial;
  font-size: 83px;
  margin: 450px 0px 0px 0px; 
}
span {
  background: url(http://o.homedsgn.com/wp-content/uploads/2011/04/NYC-at-Night-54.jpg) no-repeat;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: block;
  background-position: center -450px;
}

<h1><span>NEW YORK</span></h1>