今日はちょこっとだけ弄ってみる
すこしづつ上の方から下に順に編集していきます
今日は背景を変えてみました
人によってちがうけど俺はブラックを基本に弄っていきます
/*
BLACK
*/
body
{
color: #cccccc;
padding-right: 2px;
padding-left: 2px;
background: #000000;
padding-bottom: 2px;
margin: 0px;
padding-top: 8px;
text-align: center;
}
これがデフォ
まず背景を変えてみる
background-image: url(『ここに画像URLを貼ってね』);
これを
body{ }の内のどこかにくっ付けるだけで背景がかわります
入れてみます
/*
BLACK
*/
body
{
color: #cccccc;
padding-right: 2px;
padding-left: 2px;
background: #000000;
padding-bottom: 2px;
margin: 0px;
padding-top: 8px;
text-align: center;
background-image: url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/167721/P1.jpg);
}
こうなりました
背景画像はスタイル用画像で登録します
そこでURLがもらえるからコピペっと
これで背景はかわりました
これだけだとページの下のほうを見ると背景画像繰り返し表示されています
デスクトップの背景を変えるときの「並べて表示」と同じ状態です
登録する背景画像を大きい物にしても解消できますが100ｋ超えちゃいますよね(´･ω･`)ｶﾞｯｶﾘ･･･
そこで、
「スクロールした際に背景も一緒にスクロールしてしまう」
↓
「スクロールしても背景はスクロールしないでそのまま表示」
にしました
それは
background-attachment: fixed;
これを同じくbody{ }の内のどっかに貼ります
/*
BLACK
*/
body
{
color: #cccccc;
padding-right: 2px;
padding-left: 2px;
background: #000000;
padding-bottom: 2px;
margin: 0px;
padding-top: 8px;
text-align: center;
background-image: url(https://cdn.snsimg.carview.co.jp/carlife/images/UserCarPhoto/167721/P1.jpg);
background-attachment: fixed;
}
こうなりました
これで登録した画像が背景になって、しかもスクロールしても背景は動かない。
他にも色々編集したいけど今日はこれで終わり
少しづつ解説しながら編集していこうと思います
提供
MyFriend
拓
協力
MyFriend
拓
Posted at 2006/02/26 04:00:02 | |
トラックバック(1) |
スタイルシート編集 | 日記
スタイルシート改造Part１ 
缶コーヒーについてくるおまけ
すごくおいしいパン
