I am looking to add text inside a transparent image that has the appearance of an area painted with a paintbrush. I have cut the edges into 8 sections: top left, top middle, top right, left, right, bottom left, bottom middle, and bottom right.
However, there seems to be something missing in my setup. Can anyone provide suggestions or feedback?
Please refer to the attached screenshot for reference. Pay attention to the white line surrounding the text.https://i.sstatic.net/NctBC.png
Below is the HTML code snippet:
<html>
<head>
<meta charset="utf-8">
<title>Banner Test</title>
<style>
.banner-content {
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
width: 70%;
left:50%;
}
.banner-content .top {
background-image: url("img/Paintstrip-subhead_topmiddle.png");
background-position: top center;
background-repeat: repeat-x;
min-height: 21px;
position: relative;
top: 0;
float: left;
width: 100%;
display: block;
}
.banner-content .top:before {
background-image: url("img/Paintstrip-subhead_topleft.png");
background-position: top left;
left: -50px;
background-repeat: no-repeat;
content: '';
position: absolute;
top: 0;
width: 50px;
height: 100%;
}
.banner-content .top:after {
background-image: url("img/Paintstrip-subhead_topright.png");
background-position: top right;
right: -50px;
background-repeat: no-repeat;
content: '';
position: absolute;
top: 0;
width: 50px;
height: 100%;
}
.banner-content .middle {
position: relative;
background-color: rgba(137, 38, 120, 0.85);
float: left;
width: 100%;
display: block;
text-align: center;
color: #fff;
}
.banner-content .middle h1 {
font-size: 35px;
}
.banner-content .middle::before {
background-image: url("img/Paintstrip-subhead_leftmid1.png");
left: -50px;
background-repeat: no-repeat;
content: '';
position: absolute;
top: 0;
width: 50px;
height: 100%;
background-repeat: repeat-y;
background-position: left center;
}
.banner-content .middle::after {
background-image: url("img/Paintstrip-subhead_rightmid1.png");
right: -50px;
background-repeat: no-repeat;
content: '';
position: absolute;
top: 0;
width: 50px;
height: 100%;
background-repeat: repeat-y;
background-position: right center;
}
.banner-content .bottom {
background-image: url("img/Paintstrip-subhead_bottom1.png");
background-position: bottom center;
background-repeat: repeat-x;
min-height: 31px;
position: relative;
z-index: -1;
top: 0;
float: left;
width: 100%;
display: block;
}
.banner-content .bottom:before {
background-image: url("img/Paintstrip-subhead_bottomleft.png");
background-position: bottom left;
left: -50px;
background-repeat: no-repeat;
content: '';
position: absolute;
top: 0;
width: 50px;
height: 100%;
}
.banner-content .bottom:after {
background-image: url("img/Paintstrip-subhead_bottomright.png");
background-position: bottom right;
right: -50px;
background-repeat: no-repeat;
content: '';
position: absolute;
top: 0;
width: 50px;
height: 100%;
}
</style>
</head>
<body>
<section class="banner-content">
<div class="top"></div>
<div class="middle">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
</div>
<div class="bottom"></div>
</section>
</body>
</html>