html - 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 that div (which is called #content) see through, so that the text is like a window to the background of the site.

Here's an example:

Answer 1

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>