CSSで背景画像などを変更する

こんな初歩的なこと、メモする意味ないだろうと思いますよね。私よく忘れるんです。

さて、前提はclass指定したdiv要素で背景などを好みのものへ変更します。
指定内の背景色を変更する
#title_box{
background-color: #カラーコード;
}

指定内の背景を画像に変更する。(タイル状)
#title_box{
background: url("画像URL");
}

指定内の背景画像を変更し、ついでに色も変える。(背景固定)
#title_box{
background: 背景色のカラーコード url("画像URL") no-repeat 横% 縦%;
}

指定内の背景画像を変更し、ついでに色も変えてborderも表示させる。
#title_box{
border: 1px solid カラーコード;
background: url("画像URL");
background-color: #背景色のカラーコード;
}


オマケ
背景色を透過させる。
#title_box{
background-color: transparent;
}

transparentは、指定している背景色を除外します。ので、その部分だけ透明になります。
PCからだと指定しても特に問題ないと思いますが、私のスマホのデフォルトcssは、背景色の初期値がグレーになっていたので、ブラウザの設定が初期設定のまんまで弄ってないスマホから見ると、そのスマホの既定値になってしまいます。おのれiPhone。おのれsafari。 まぁ…bodyで背景色を指定しているのなら、問題ないでしょう。
  • Owner:
  • 暇つぶしにとcss/htmlのお勉強にテンプレートの配布をしています。

Comment form

  • 非公開コメント