Нужна помощь начинающему верстальщику

Общее
1

Ребята помогите пож-ста! создаю сайт с основным блоком в центре и боковыми фиксированными с фоновым изображением. мало того что картинка отображается не на всю выбранную ширину, в разных браузерах по-разному. так еще и когда делаешь окошко браузера меньше центральный блок перекрывает левый…а фон в правом боковом блоке вообще не отображается( скажите пож-ста что я делаю не так? вот код:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>AM-RECORDS</title>
	<link rel="shortcut icon" type="icon" href="images/12.png">
	<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
   <div id="block-left"></div>
   <div id="container"></div>
   <div id="block-right"></div>
</body>
</html>

и в CSS:

*{
   margin:0;
   padding:0;
}
html, body{
   height: 100%;
   width: 100%;
   -webkit-background-size: content-box;
   -moz-background-size: content-box;
   box-sizing:content-box;
}
#block-left{
width:20%;
height:100%;
float:left;
background:#000080;
background-image:url(images/left.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-size: 100% contain;
-webkit-background-size: contain;
   -moz-background-size: contain;
   display:block;
   box-sizing:contain;
}
#container{
width:60%;
height:100%;
float:left;
background:#006400;
-webkit-background-size: border-box;
   -moz-background-size: border-box;
   box-sizing:border-box;
    display:block;
}
#block-right{
width:20%;
height:100%;
float:left;
background:#CD5C5C;
background-image:url(images/right.jpg);
background-attachment:fixed;
background-repeat: no-repeat;
background-size: 100% contain;
-webkit-background-size: contain;
   -moz-background-size: contain;
   display:block;
   box-sizing:contain;
}
2

Что значит боковыми фиксированными? Чтобы не скролились? Из описания мало что понятно. Обычные 3 колонки:

HTML

<div class="container clearfix">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

CSS

.left,
.center,
.right {
	float: left;
}
.left,
.right {
	width: 20%;
}
.center {
	width: 60%;
}
.clearfix::after {
	display: block;
	content: "";
	clear: both;
}

P. S. Флоатным блокам не надо задавать display: block; они и так блочные.