昨日、GIMPで同じ画像（写真）を継ぎ目なくきれいに壁紙状に並べるのを試した。
ここで作成した画像をHTMLで壁紙として並べる方法。
単純に同じ画像を背景一杯に並べるのは簡単。
<body background="photo/240.jpg">
背景画像を透過風に白っぽくするのは少し面倒。
<body>に対してはopacityなどは指定できないので、<div>にbackground-imageで画像を指定する。透過風に白っぽくするのにopacityを使うと子要素も透過になってしまい、本文等もグレーっぽくなって見づらくなる。それを防ぐためには、<div>を重ねてrgba()で透過率を指定する。
背景一杯に画像を並べるためには、他の要素のmarginを0にし、<html>や<body>のheightを100%にする必要がある。
<style>
* { margin: 0; }
html, body { height: 100%; }
#wallpaper {
background-image: url(photo/240.jpg);
background-repeat: repeat;
height: 100%;
/* opacity: 0.7; 子要素も透過になってしまう。 */
}
#cover {
height: 100%;
background: rgba(255, 255, 255, 0.7);
}
</style>
<body>
<div id="wallpaper">
<div id="cover">
・・・
</div>
</div>
</body>
