Menu
I am using the background-clip property to fill my text with a background image. For some reason, even though the image I'm using is very large, is being cut off as the background on the left and right edges of the text. As you will see in the screen shot, I am loosing the side of the letter "J". This was occurring on the right side of this text as well when I have my full name there but replaced it for privacy. I've tried removing padding as well as enlarging the container of my text but nothing has helped, and when I make my text a solid color again it is not cut off in any away. I'm not sure if maybe the Big Text plugin I am using is messing with it. Can anyone help me with this?
http://i41.tinypic.com/2ms0suh.png
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>jessica n/a: PORTFOLIO</title>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Playfair+Display:700italic' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="favicon.ico" />
<style>
body
{
background: url(grungebg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0 auto;
padding:10px;
max-width:600px;
min-width:250px;
}
#container
{
text-align:center;
}
@font-face
{
font-family: 'league_gothicregular';
src: url('leaguegothic-regular-webfont.eot');
src: url('leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('leaguegothic-regular-webfont.woff') format('woff'),
url('leaguegothic-regular-webfont.ttf') format('truetype'),
url('leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
font-weight: normal;
font-style: normal;
}
.font1
{
font-family:league_gothicregular, sans-serif;
color:#a7a7a7;
background: -webkit-linear-gradient(transparent, transparent), url(mask.png);
background: -o-linear-gradient(transparent, transparent), url(mask.png);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.font2
{
font-family: Quicksand, sans-serif;
font-weight:300;
color:#e5e5e5;
}
.font3
{
font-family:Playfair Display, serif;
font-weight:700;
font-style:italic;
color:#b90504;
background: -webkit-linear-gradient(transparent, transparent), url(colormask.png);
background: -o-linear-gradient(transparent, transparent), url(colormask.png);
background-position:center;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.font4
{
font-family: Quicksand, sans-serif;
font-weight:400;
font-size:14px;
color:#e5e5e5;
}
</style>
</head>
<body>
<div id="container">
<div class="font1">HELLO,</div>
<div class="font2">my name is</div>
<div class="font3">jessica n/a</div>
</div>
<div id="extendedcontainer" class="font4">
and I'm a student studying Graphic Communication Design at the _______ __ _______ _____________ ____ ___ ________ at the __________ of __________. I like to design websites and take pictures.
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="bigtext.js"></script>
<script>
jQuery(window).load(function () {
$('#container').bigtext();
});
</script>
</body>
</html>
707
asked Sep 17 '25 19:09
I realize this is a very old question, but the solution may prove helpful to someone coming across it:
This is actually caused by the bounding box of the heading not extending passed the baseline of the text itself, or due to the font having ligatures or other em-bound trickery to create connective script fonts. You can trick your bounding box to give you enough room for the descenders by adding padding, and then negate that padding with a negative margin of the same absolute value to get the text back to where it was originally.
.font3 {
padding-left: 0.2em;
margin-left: -0.2em;
}
This can also work when the descenders are being cut off at the bottom by switching out the side of the bounding box being cut:
.font3 {
padding-bottom: 0.2em;
margin-bottom: -0.2em;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
