IT・コンピューター

記事の背景に画像を入れる方法

記事の背景が白一色のままだと、なんか、寂しい気がしませんか

で、背景のボトム部分にこのような透明度を60%したくらいのモノトーン画像をいれると

記事部分が引き締まってきます

まずは画像を作りましょう



画像の彩度を落とすと、モノクロ画像になりますので

その後、透明度を60%程度までさげると、うっすらとした画像になります。

次にスタイルシートの

.blogbodyの部分をこのようにします

.blogbody{background:#fff url(http://＊＊＊＊.jpg); ←作成した画像のURL

background-repeat:no-repeat;

background-position:bottom right;

margin:0px 0px 10px 0px;

padding:8px;

border-left:1px solid #ccc;

border-right:1px solid #ccc;

border-bottom:1px solid #ccc;

}

かんたんですね

画像の幅を記事の枠いっぱいにしたかたので

.blog{

width:510px;

margin:0px 0px 0px 0px;

}

この510pxと同じ幅サイズで画像を作りました

すると、枠ぴったりのイメージになります。