7

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:

enter image description here

Oriol
  • 274,082
  • 63
  • 437
  • 513
colzu
  • 131
  • 1
  • 8

2 Answers2

7

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>
Fahad Hasan
  • 10,231
  • 4
  • 29
  • 36
  • 3
    Are you sure `background-clip: text` is CSS3 and not a webkit extension? The [spec](http://dev.w3.org/csswg/css-backgrounds/#the-background-clip) doesn't list `text` as a possible value of `background-clip`. – Oriol Oct 29 '14 at 23:39
  • `h1`'s `color` shouldn't be `transparent` because then the text becomes invisible on non-webkit browsers. And webkit browsers don't need it because they have `-webkit-text-fill-color: transparent`. – Oriol Oct 29 '14 at 23:47
2

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/

Paul
  • 8,974
  • 3
  • 28
  • 48