I am having a problem displaying the following image on the webpage. I think it's a coordinates issue.
I think if i twitch the -397px -85px i should be able to display the image. However, even after twitching it i was not able to get it displayed. Can someone please help me out here.
image icon
The code, found from firebug.
There seems to be a problem with the image you have posted. Especially relating to the dimensions and placement of individual sprites.
See the snippet below on how the background-position plays with this images sprite:
i.phone {
display: inline-block;
background-image: url(https://i.sstatic.net/kyVhA.png);
background-position: -63px -3px;
height: 52px; width: 51px;
}
i.phone:hover {
background-position: -70px -77px;
}<i class="phone"></i>Here is sample fiddle for you
#test {
background: url('https://i.sstatic.net/kyVhA.png') 0 0 no-repeat;
height:100px;
width:100px;
}
As MR green mentioned you coordinates are out of range also note that local host point and try giving the relative path to the image.
Try this...
i.phone
{
float:left;
height:56px;
vertical-align:middle;
width:56px;
background:url(https://i.sstatic.net/kyVhA.png) -65px -75px no-repeat;
}
The url you provided for the image is:
http://localhost/WEBSITE/images/img-sprite2.png
Which is mentioning localhost. So, I am sure that your code will work in localhost but not on actual website. Try to use relative path instead of absolute path.
And also, the image you provided has dimensions 126px X 133px and you are pointing the coordinates outside of the image i.e 397px X 85px as shown in your post.
If you have provided excerpt image from your actual image then let me know.
[Note]: Also tell the designer to provide images in scaled layout fashion. It seems, the images are provided in hurry placing not exactly below or side of an icon. I hope you understood my point.
are you sure are you assigning the path is correct ?? if yes then give height and width on that element where you want to display the images and also display:block try this
try add: display: block; if element is not a block element then height and width are ignored
