why this img won't display?
Hi,
Having a difficult time figuring out why this does not display on my site when I test. The images folder is housed within the root of site (first level). Strangely, the same code works & displays on a completely different site. The space where button is still links outbound, and when I play with the opacity, I can see a black box over it:
.button {
background: rgba(0, 0, 0, 0) url("/images/button.png");
background-repeat: no-repeat;
background-position-y:center;
background-position-x:center;
background-size: contain !important;
padding: 0 !important;
position: relative;
top:9px;
}
.button:hover {
opacity: 0.8;
background: rgba(0, 0, 0, 0) url("/images/button.png") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position-y:center !important;
background-position-x:center !important;
}
.social ul {
float: left;
}
.social {
padding: 33px 0 0 1px;
margin-left: -20px;
}
.social a {
background-size: contain;
display: inline-block;
height: 40px;
width: 40px;
}
-------------------------------------------------------
<div class="col-md-3 col-xs-12 ">
<div class="social">
<div id="socialIcons">
<a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<a href="https://www.facebook.com" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="https://twitter.com" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="https://plus.google.com" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="https://www.youtube.com" target="_blank"><i class="fa fa-youtube" aria-hidden="true"></i></a>
<a href="https://www.pinterest.com" target="_blank"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
<a class="button" target="_blank" href="http://www.custom-button.com/"></a>
</div>
</div>
</div>
Anything glaringly wrong with this? Thank you for your time!
AdChoices