Hello everyone! I am in need of some assistance with a problem I'm facing.
When I view my web page on my local computer, everything appears correctly with the images showing up. However, once I upload the web page to a server, the images no longer appear.
I have double-checked that all file locations and names are correct, ensured proper file permissions, linked the CSS file correctly, and set the images relative to the CSS file.
I tested the code on JSFiddle and it worked without any issues: http://jsfiddle.net/ySm2x/
But for some reason, the images do not display on my website - you can see the issue under the "Coming Soon" text here:
What could be causing this problem?
Below are snippets of the HTML & CSS codes I used:
HTML CODE:
<div class="social" height="40">
<a class="example" href="#" target="_blank">Example</a>
</div>
CSS Code:
.social {
text-align: center;
height: 40px;
width: auto;
}
.example {
display: inline-block;
width: 40px;
height: 40px;
background-image: url(image/url/relative/to/css/file);
text-indent: -99999px;
}
.example:hover {
background-position: 0 -40px;
}