Pure CSS Transparent Image Under Text with Scaled Background Image

2015 updated examples!


A quick example of making use of the background clip property for webkit browsers staying as functional as reasonable for other browsers making use of prefixing. 3 examples and two (sort of) methodologies applied.

Here the background clip is used via css and tested to work in Moz Nightly its a nice effect:

This one I had forgotten about lost in my private library, but appears to be an excellent application. May be a Foundation inspired one I don't recall, but I call it 'Pablos Fish and Chips', and is a transparent shadow underwater text effect. You will note my least favorite place on earth is any fish and chips establishment, nonetheless the name greatly amuses me.

Straight forward enough:

    
body { 
  background: #001118 url('//webmx-cdn-static.s3-us-west-2.amazonaws.com/assets/underwater.jpg') fixed 0 -500px no-repeat; 
  font-family: "RobotoDraft",sans-serif; 
  font-size: 13px; 
  line-height: 18px; 
  text-shadow: 0 0 1px rgba(0,0,0,0.01); 
  color: rgba(255,255,255,0.5); 
  position: relative; 
}
.header-text{
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 280px;
  padding: 16px 0 0;
  border: none;
  font-weight:900;
  font: normal 115px/0.65 "Open Sans", Helvetica, sans-serif;
  font-size:120px;
  padding: 16px 0 0;
  border: none;
  font-weight:900;
  color: rgba(188,188,188,0.6);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  line-height:80px;
  text-shadow: 12px 12px 0 rgba(48,48,48,0.3) ;
}

  

The next has been more troublesome and is a bit different in that it attempts a transparent text to show through one graphic on top of well, yet another. Another matter to be sure, but further complicated not for any lack of patriotism or particular love of fish, rather changes to both browser behavior and simple https have broken and its graphics a hundred times and I've only hurriedly half-assed any attempt to fix it. At present it works most reliably of course in webkit. The background of the text is a American Flag graphic, over a background of a downed US Airways flight in which nobody was killed it would appear.

Started as a test of cross browser text effects for a project then the humour seemed best applied to Aero mexico but for lack of good photos to match the taglines because of an unexpectedly strong safety record (yes, Mexico!) that popped in my head I decided on a company whose safety record is criminal, naturally that was alaska airlines, but US has had a lot of action lately and so I settled on them

Here's the CSS currently though I'm actively messing with it:

   @import url(http://fonts.googleapis.com/css?family=Lobster&effect=3d-float|ice);
body{
  font-size:1rem;
  background-color:silver;
  font-family:'Lobster';
  padding-top:50px;
  /*http://s3-us-west-2.amazonaws.com/s.cdpn.io/167883/usairwayscrash.jpg*/
  background:url(http://www.eonline.com/eol_images/Entire_Site/2014213/rs_560x415-140313190321-1024.US-Airways-Plane-Crash-Philadelphia.ms.031314_copy.jpg) bottom;
background-size:100% auto;
  background-size:cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
   overflow: hidden;
  display:block;
}
header {
  text-align:left;
  font-family:'Lobster';
 color: #eee;

  
  -webkit-text-fill-color: transparent;
  /*http://www.vectorfree.com/media/vectors/red-map-graphics.jpg*/
 background: -webkit-linear-gradient(transparent, transparent),
             url(http://2010.eif.co.uk/files/images/Rhapsodies-in-Red-White-and-Blue.jpg) center repeat;
 background: -o-linear-gradient(transparent, transparent);
 -webkit-background-clip: text;
background-image: -moz-url(http://2010.eif.co.uk/files/images/Rhapsodies-in-Red-White-and-Blue.jpg);background: -moz-radial-gradient(circle at center, red, blue, white);color:rgba(255,255,255,0.5);
}
h1{
  font-size:3rem;
  font-weight:800;
}
cite {   
  font-size:2rem;
}


The graphic is not the best size, so I've been playing with the background properties to maintain its scale and if its going to crop at least aligning towards the bottom gives the proper focus.

In Testing with Mozilla/Nightly this is not working properly again, gotta love that. The patch was to show transparent white text, why I can't show a graphic or linear gradient through is anyones guess, though its no secret it is somewhat challenging this was working or at least simulated with an american flag pattern gradient. The Opera workaround is similar. Chris has a good solution I will link to it when I find it

Here's one last one no pen since the colors were so drab, but I've included because hey its just a crazy ass photo and unfortunately yes it would appear unlikely there not be a fatality or two but hey we are all adults or child geniuses, or both. And in the real world, shit happens:

coded by : ray anthony
website: http://rayanthony.io

Effect 1 pen: http://codepen.io/rayrc/pen/pjvQJW
Underwater Pablo Example pen: http://codepen.io/rayrc/pen/aueyB
USA Example pen: http://codepen.io/rayrc/pen/PwqNzq



3,293 0 0