background-image not showing in div normally or on hover

Question

Ok guys, I have this in the style.css of my website.

 .asia{
margin-left:40px;
background-image:url('../resources/img/asia.jpg');
width:100px;
height:75px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
 }
.asia:hover{
background-image:url('../resources/img/asia2.png');
width:100px;
height:75px;

 } 

these are two images, that I will use on my homepage by putting

<div class="asia"></div> 

and everything is set for them to show up like an animation when hovering over.

The only problem is that on the laptop everything works fine, the index.html shows me all the images and the hover efect works well but when uploading and testing it on the server the images do not show up.

What is the problem? What am I doing wrong?

Answer 1

Could I make a suggestion, instead of having two files, perhaps combine them into one image. Then, on hover you can update the background-position . This way, your document won't need to request another file from the server (good for people on mobile, and conserving downloads) as well as preventing a 'flicker' while the page hangs without its file and loads it in. Here's an example of the implementation.

.imageContainer {
   background: url('../resources/img/asiacombined.jpg') no-repeat 0 0;
}

Let's assume the image is 100px tall.

.imageContainer:hover { 
   background-position: 50px /*x axis, shifting to the top of the next image in the file*/ 0 /* Y axis */;
}

Hopefully this helps.

Ps.

You can also use top , left , right , center , bottom to align content.