小さいサイズの画像を使って全画面背景にするCSS
(1)<style>〜</style>
内で指定する
html { background: url(/*画像のURL*/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body { background-color: transparent;
}
(2)<body>〜</body>
内の<img>
に指定する
<img src="画像のURL" style="z-index: -1; min-height:100%; min-width: 1024px; width:100%; height:auto; position:fixed; top:0; left:0;">
または、<img>
にclass
指定する
*class名
をbackimage
にした場合の例
img.backimage { z-index: -1; /*マイナス1以上、下に配置*/
min-height:100%;
min-width: 1024px;
width:100%;
height:auto;
position:fixed;
top:0;
left:0;
}
引用・参考元:
http://ri-mode.com/rainbow/2013/04/21/css_fullscreen_background/
http://web-creation.seesaa.net/article/316659286.html