Collage of Words With CSS

Question

Goal: I want to create a collage of words with little spacing in order to semi-display the background image. Something similar to this but with words.

Problem: Whenever I add an image to the background of the text, it messes with the format of the text

.body-container{
	padding: 0;
	margin: 0;
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
.body-container h1{
	padding: 0;
	margin: 0;

	left:0;
	top:0;
	width: 100%;
	height: 100%;

	display: inline-block;
    font-size: 35px;
    line-height: 34px;
    height: 35px;

    
 	background: url(path/to/image) no-repeat;
	-webkit-background-clip: text;
}

<div class='container body-container'>
		<h1>Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite </h1>

	</div>

Answer 1

It's because you gave the h1 a height of 35px. Remove that and it works with adding -webkit-text-fill-color: transparent;. I believe you also don't need the height:100% that's on the h1.

.body-container{
	padding: 0;
	margin: 0;
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	background-color: #fff;
}
.body-container h1{
	padding: 0;
	margin: 0;
  height:100%;
	left:0;
	top:0;
	width: 100%;

	display: inline-block;
    font-size: 35px;
    line-height: 34px;

    -webkit-text-fill-color: transparent;
 	background: url(http://fillmurray.com/460/300) no-repeat;
	-webkit-background-clip: text;
}

<div class='container body-container'>
		<h1>Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite Inspite </h1>

	</div>