イラストレーターで描いた画像やフリー素材を使ってブログの見た目を変える!

タイトル画像

タイトル画像はフリー素材のページ
http://footage3.openspc2.org/sozai/fullsize/

でいただいたものをタイトル画像の大きさ(920×180)にトリミングして使用

背景

背景はイラストレーターで作成した
自作背景画像

楕円ツールペンツール、グラデーションのみ使いました。
意外にこれだけでも絵は描けるんだなと実感。

CSS

CSSはこのように作成。基本の部分です。

body{background-color:#7cfc00;
     background-image:url(http://art40.photozou.jp/pub/686/2588686/photo/135955520_org.v1337527683.png);
}

h1 {background-image:url(http://art19.photozou.jp/pub/686/2588686/photo/135947312_org.v1337524904.jpg);
     text-align:right;
}

h1 a{color:#000000;
     background-color:#dcdcdc;
     padding:0 20px;
}

初めて試しましたが、背景は先に色を読み込んで、透過pngの画像を読み込むと両方反映されるようです。
授業で教わった階層構造の問題なんだろうなと解釈