image resize on swap images

I have code that has links in a row and swaps images.
This was an ordeal to say the least.

The images dont resize as i thought on browser resize so I had to use media queries to alter size of these images.

Can I get the images to resize without adding media queries?

here is what happens, see I get only past of the image displayed on resize?

http://www.mymrt.net/ComputerTraining/test4.html
 img, embed, object, video {

  max-width: 100%;
   
}

ul.nav
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: left;
    
}


.nav li#welcome a {
	 background-image:url(images/ic1.png); 
  background-repeat: no-repeat; 
	 
	 }
.nav li#welcome a:hover {
	 background-image:url(images/ic1b.png); 
  background-repeat: no-repeat; 
 
  
   }

.nav li#welcome2 a {
	 background-image:url(images/ic1.png); 
  background-repeat: no-repeat; 
	 
	 }
.nav li#welcome2 a:hover {
	 background-image:url(images/ic1b.png); 
  background-repeat: no-repeat; 
  
   }
 .nav li#welcome3 a {
	 background-image:url(images/ic1.png); 
  background-repeat: no-repeat; 
	 
	 }
.nav li#welcome3 a:hover {
	 background-image:url(images/ic1b.png); 
  background-repeat: no-repeat; 
 
  
   }

.nav li#welcome4 a {
	 background-image:url(images/ic1.png); 
  background-repeat: no-repeat; 
	 
	 }
.nav li#welcome4 a:hover {
	 background-image:url(images/ic1b.png); 
  background-repeat: no-repeat; 
  
   }
 
   
#head ul li a
	{
	text-decoration: none;
	
	float:left;
	margin-right:40px;

	}

#head ul li 
{
     display: inline;
	 

 }
#head img
{
      max-width: 100%;

 }


#head ul
{
/*margin-left: 15%;*/
padding:0;

list-style-type: none;

border:none;

}	



@media screen and (min-width: 960px) 
{
	ul.nav a{  height: 100px; width: 100px;}
}

@media screen and (max-width: 959px) 
{
	ul.nav a{  height: 50px; width: 50px;}
}

</style>
</head>

<body>

lkjl
<div id="head">
  <ul class="nav">
    <li id="welcome"><a href="home.html"></a></a></li>
    <li id="welcome2"><a href="home.html"></a></a></li>
      <li id="welcome3"><a href="home.html"></a></a></li>
    <li id="welcome4"><a href="home.html"></a></a></li>
  </ul>
</div>

Open in new window

jagguyAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
Advertise Here
 
lightspeedvtConnect With a Mentor Commented:
You have to add this style to a tags and it's hovers:

background-size: 100%;

Open in new window

So you will have:

.nav li#welcome a {
	background-image:url(http://www.mymrt.net/ComputerTraining/images/ic1.png); 
	background-repeat: no-repeat; 
	background-size: 100%;	 
}

Open in new window


Forgot to add that you need to add it to all styles with images.

Here is demo:
http://jsfiddle.net/TxSrg/
0
 
Jagadishwor DulalBraces MediaCommented:
Yes you can using javascript/jquery or any other programming language but better one is using media queries.
http://blog.kurtschindler.net/post/flexible-dynamically-resizing-images-with-css
0
 
jagguyAuthor Commented:
No that doesnt work for a list of images with specific names as below.
I can do a basic example but it gets complicated for real examples.
The below gives me no output

	.nav li#welcome a {
	 background-image:url(images/ic1.png); /*todo  set %size here */
  background-repeat: no-repeat; 
   background-size:100% 100%;
	
	 }
.nav li#welcome a:hover {
	 background-image:url(images/ic1b.png); 
  background-repeat: no-repeat; 
 
  
   }

.nav li#welcome2 a {
	 background-image:url(images/ic1.png); 
  background-repeat: no-repeat; 
	background-size:100% 100%;
	 }
.nav li#welcome2 a:hover {
	 background-image:url(images/ic1b.png); 
  background-repeat: no-repeat; 
  
}

#head ul li a
	{
	text-decoration: none;
	float:left;
	margin-right:40px;

	}
#head ul li 
	{
	
max-width:100px;
	}	
#welcome{
	max-width:100px;
	
}
#welcome2{
	max-width:100px;
	
}
@media screen and (min-width: 960px) 
{

}

@media screen and (max-width: 959px) 
{

}

</style>
</head>

<body>

lkjl
<div id="head">
  <ul class="nav">
    <li id="welcome"><a href="home.html"></a></li>
    <li id="welcome2"><a href="home.html"></a></li>
      
  </ul>
</div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.