John Mason John Mason -3 years ago 68
CSS Question

Collage of Words With CSS

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download