記事本文の背景にワンポイント画像を配置する

記事の背景が無地で味気ないので、背景に画像を入れてみましょう

まずは記事本文の横幅以内の画像を作成して画像フォルダにアップします。



次に、その画像を記事背景に使うためには



CSS編集画面のこの部分を探して、

background-image : url(http://stat.ameba.jp/user_images/********.jpg);/*先ほど作成しておいた画像のURL*/

background-repeat : no-repeat;

background-position: right bottom;/*右下に配置*/


この3行を追加すればOK。



/* (3-6) 記事--------------------------------------------*//* skinArticle 記事エリア */.skinArticle{/* 注 ベースのcssに margin-bottom の記述有り */padding:16px 0;border:1px solid #dddddd;background:#ffffff;/* ←記事に背景を敷きたいとき */background-image : url(http://stat.ameba.jp/user_images/********.jpg);/*先ほど作成しておいた画像のURL*/background-repeat : no-repeat;background-position: right bottom;/*右下に配置*/}.skinArticle2{}.skinArticle3{}


画像の配置は右下にしたり、左下にしたりご自由に。。。

background-position: right bottom;/*右下に配置*/

background-position: left bottom;/*左下に配置*/



とこんな感じです。。。。ニコニコ





0 件のコメント :

コメントを投稿