UPDATE EDIT. There is still an unresolved issue with this problem. Although setting the background to no-repeat fixed the image repetition problem, the list item text still overlaps the background image and there is an extra tick to the left. Please refer to the new screenshot for clarity.
https://i.sstatic.net/L8crt.png
Despite modifying the original code and attempting various margin and padding adjustments, I have not been able to successfully fix the positioning of the background image.
The current CSS is as follows:
ul.follow-background {
list-style: none;
margin: 0;
padding: 0;
}
.follow {
background: no-repeat left 16px; /** fixed vertical position **/
padding: 0 0.6em 0 0;
}
.follow-background .follow a::before {
content: '';
list-style: none outside !important;
vertical-align: top;
line-height: 20px;
margin: 0 0 0 1em;
padding: 0 0 0 0.6em;
top:0;
left: 0;
right:20px;
bottom:0;
overflow: hidden;
}
.follow.facebookicon {
background-image: url('https://www.botanical-art.baeecorp.org/wp-content/uploads/facebook-icon-16x16.png')
}
.follow.flickricon {
background-image: url('https://www.botanical-art.baeecorp.org/wp-content/uploads/fluid-flickr-logo-16x16.png');
}
.follow.linkedinicon {
background-image: url('http://www.botanical-art.baeecorp.org/wp-content/uploads/linkedin-icon-16x16.png');
}
.follow.pinteresticon {
background-image: url('https://www.botanical-art.baeecorp.org/wp-content/uploads/pinterest-logo-16x16.png');
}
.follow.rssicon {
background-image: url('https://www.botanical-art.baeecorp.org/wp-content/uploads/rss-logo-blue-bullet-16x16.png');
}
.follow.twittericon {
background-image: url('https://www.botanical-art.baeecorp.org/wp-content/uploads/twitter.gif');
}
THE HTML remains the same:
<p>Follow us on our social media connections:</p>
<ul class="follow-background">
<li class="follow facebookicon"><a href="https://www.facebook.com/baeeorg" rel="nofollow">Facebook</a></li>
<li class="follow flickricon"><a href="https://www.flickr.com/photos/baee/" rel="nofollow">Flickr Photo Albums</a></li>
<li class="follow pinteresticon"><a href="https://www.pinterest.com/baee0196/" rel="nofollow">Pinterest</a></li>
<li class="follow twittericon"><a href="https://twitter.com/BaeeArtists" rel="nofollow">Twitter</a></li>
<li class="follow rssicon"><a href="https://www.botanical-art.baeecorp.org/news/" rel="nofollow">News Announcements (subscribe to get our latest posts)</a></li>
</ul>
END EDIT UPDATE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~