背景画像を固定＋もろもろ - WEBサイト制作の勉強

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>背景画像を固定</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	 var topBtn = $('#to-top');    
    topBtn.hide();
    //スクロールが100に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
	
	$('a[href^=#]').click(function(){
		var speed = 300;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>
</head>

<body id="top">
<div id="container">
<div id="header">
<h1>背景画像を固定</h1>
</div><!--/header-->
<div id="content">
<div class="box"></div>
<div class="box"></div>
<div class="box right"><a class="twitter-timeline" href="https://twitter.com/seiburailway" data-widget-id="608922794332594177">@seiburailwayさんのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

</div>
<div class="box size-2">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1619.5270551727035!2d139.71555011956994!3d35.72488773645675!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6be1f35c5b%3A0xa9e4a5e1f39e8d31!2z44CSMTcxLTAwMjIg5p2x5Lqs6YO96LGK5bO25Yy65Y2X5rGg6KKL77yS5LiB55uu77yW4oiS77yR77yQIOODl-ODquODouODl-ODqeODvOODiOODk-ODqw!5e0!3m2!1sja!2sjp!4v1434014625167" width="636" height="312" frameborder="0" style="border:0"></iframe>
</div>
<div class="box right"></div>
</div><!--/content-->
</div><!--/container-->
<p id="to-top"><a href="#top">トップに戻る</a></p>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */

/* reset */
html, body,div,ul,li,h1,p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
ul {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;
}


body {
  background-image: url(../img/bg.png);
  
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
  /* 画像を繰り返し表示しない */
  background-repeat: no-repeat;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  /* 表示するbodyの大きさに基づいて、背景画像を調整 */
  background-size: cover;
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
}
#container {
  width: 960px;
  height: 2000px;
  margin: 0 auto;
  padding-top: 20px;
}
#header {
  width: 960px;
  height: 300px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 10px solid #FFF;
  border-radius: 10px;
  box-sizing:border-box;/*ボーダーを内側に入れる*/
}
h1 {
  text-align: center;
  margin-top: 40px;
  font-size:44px;
}
.box {
  width: 312px;
  height: 312px;
  background: rgba(255, 255, 255, 1);
  float: left;
  margin-right: 12px;
  margin-top: 12px;
}
.right {
  margin-right: 0;
}
.size-2 {
  width: 636px;
}
#to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: url(../img/btn.png);
}
#to-top a {
    display: block;
    width: 100px;
    height: 100px;
    /*text-indent: -9999px;*/
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
#to-top a:hover {
 
}