Hello, i just started HTML and i need some help, its probobly easy to fix i just dont know how yet...

1st http://prntscr.com/dg2m0b some how i need to remove that yellow color i need to stretch table somehow... i tried removing border did not help
http://prntscr.com/dg2n04
2nd when i change my screen rez there is some problem, it changes size http://prntscr.com/dg2nra http://prntscr.com/dg2pu1 i tryed changing width and height to auto it kinda helps but it dont... http://prntscr.com/dg2opw when i try to change rez http://prntscr.com/dg2p3b
3rd i need to fix text size http://prntscr.com/dg2qdv http://prntscr.com/dg2r3j so it will be same no matter what
 
HTML

Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">

<title>Kompiuterių komponentai!</title>

<meta charset="utf-8">

</head>
<body>
<div align="center">
<table width="100%"  border="1" cellspacing="0" cellpadding="0"> 

<tr>

<td class="i" valign="middle" align="center" ><a href="#index.html" > <img src="http://i.imgur.com/RJ7xScQ.png" width="100%" height="100%" >     
	<h2><span>Graphic card</span></h2>
</td>

<td class="i" valign="middle" align="center" ><a href="#index.html" > <img  src="http://i.imgur.com/NDk56lE.png" width="100%" height="100%">
	<h2><span>Mother board</span></h2>
</td>

<td class="i" valign="middle" align="center" ><a href="#index.html" > <img  src="http://i.imgur.com/WIXxYSK.png" width="100%" height="100%">
	<h2><span>Power supply</span></h2>
</td>

<td class="i" valign="middle" align="center" ><a href="#index.html" > <img  src="http://i.imgur.com/EmpYwIx.png" width="100%" height="100%">
	<h2><span>Processor</span></h2>
</td>

</tr>
</div>

</body>
</html>


 
CSS
Code:
html { 
  background: url(http://i.imgur.com/pD6FoXj.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
img {
    opacity: 0.1;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
td.i {
  position: relative;
  height: 100vh;
  overflow: hidden;
  
}


h2 { 
   position: absolute; 
   top: 50%; 
   left: 0; 
   width: 100%;

}
h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}


I would really appreciate any help