Image Clipped Inside Font

IN THE MAGIC FOREST THE STARS HANG LIKE BRIGHT FRUIT UPON THE TREE OF LIFE, THE BREEZE BRINGS THE FRAGRANCE OF OTHER GALAXIES AND THE NIGHT IS TREASURED FAR ABOVE THE DAY.

On the desktop, widen and narrow your browser window to appreciate this image clipped inside font example. As a result you will notice the image moving inside the font. However, on a smartphone the landscape view is best.

This melding of font and image provides a rich element in the design of web pages. Therefore, use ‘image clipped inside font’ for more interesting pages.

Finally, thanks to Divya Manian for the jumping off point.

Below is the CSS and HTML used above.

CSS

body.postid-6078 div.container main section.avia_codeblock_section:first-of-type {
	background-color:#666; 
	background: url(/wp-content/uploads/2019/06/ngc-2074-lg-magellanic.jpg) repeat;
	margin: 0; 
	padding: 0; 
	min-width: 528px; 
}

h1.galaxy {
	font: 72px/92px abril-fatface, Arial, cursive; letter-spacing: .1em; 
	position: absolute; 
	padding: 30px; 
}

h1.galaxy {
	color: #099; 
	z-index: 10;
	-webkit-text-fill-color: transparent;
	background: -webkit-linear-gradient(transparent, transparent), url(/wp-content/uploads/2019/06/antennae-text.jpg) repeat;
	background: -o-linear-gradient(transparent, transparent);
	-webkit-background-clip: text;
	background-size: contain;
	min-width: 528px; 
}

h1.galaxy-glow { 
	font: 72px/92px abril-fatface, Arial, cursive;
	text-shadow: 0 0 1px #000, 0 0 20px #fff;
	z-index: 0;
	letter-spacing: .1em; 
	padding: 30px;
	min-width: 528px;
}

.large-galaxy { 
	font-size: 90px;
}

HTML

<section class="avia_codeblock_section  avia_code_block_0"  itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost" >
	<div class='avia_codeblock '  itemprop="text" > 
		<h1 class="galaxy">
			<span class="large-galaxy">I</span>N THE MAGIC FOREST THE STARS HANG LIKE BRIGHT FRUIT UPON THE TREE OF LIFE, 
			THE BREEZE BRINGS THE FRAGRANCE OF OTHER GALAXIES AND THE NIGHT IS TREASURED FAR ABOVE THE DAY.</h1>
		<h1 class="galaxy-glow">
			<span class="large-galaxy">I</span>N THE MAGIC FOREST THE STARS HANG LIKE BRIGHT FRUIT UPON THE TREE OF LIFE, 
			THE BREEZE BRINGS THE FRAGRANCE OF OTHER GALAXIES AND THE NIGHT IS TREASURED FAR ABOVE THE DAY.</h1> 
	</div>
</section>