風神雷神図

やり方その１～bodyにcss3で背景画像を配置（２つ）～

background-image:url(raijin.png),url(fujin.png);//css3では２つの画像が配置可能に！
background-position:-3% -25%,102% -48px;//カンマで区切ってそれぞれの画像の位置を決める!切り落としデザインにしたいので常に画面からはみ出るように！
background-size:auto,20%;//元画像の風神さんが小さかったのでcss3の「background-size」で調整！画面に対して20%という意味！実際にやる場合は同じ大きさで書き出すのがベスト！
background-repeat:no-repeat;

基本は同じですが、Bodyに画像を２つ配置できないので、風神さんをタグ「Body」の背景に配置！そして雷神さんをタグ「html」の背景に配置！そんで背景色はhtmlタグに書いてね。ちなみにhtmlタグとbodyタグは要素が何もなくても画面いっぱいに表示する性質を持っていますです。

ちなみに今見ているのは「その１」でやってます。

以上、第一回勉強会の報告でした。

By　真中 / 2012.09.16