2010年03月19日

背景画像 background-attachment プロパティ

スポンサード リンク

background-attachment
textarea要素に指定 背景画像の固定、スクロール。


           背景画像固定 (fixed)                               スクロール(scroll)
   * IE7は設定どうり動作しますが、
          Firefox3では(scroll)を指定しても固定したままです。
今のブログで満足ですか?
FC2レンタルサーバーLiteでホームページを作る!

サンプルソース

<html>
<head>
<title>背景画像の固定、スクロール</title>
<style type="text/css">
<!--
#Tarea00{
  background-image : url(***.gif); /*画像ファイル*/
  background-repeat : repeat; /*背景画像繰り返し*/
  background-attachment : fixed; /*背景画像固定
スクロールさせる場合は fixed の代わりに scroll を入れる*/

      }
-->
</style>
</head>
<body>
    <textarea rows="4" cols="25" id="Tarea00">
このテキストエリアは
背景画像を
全面に配置して
(background-repeat: repeat;)
スクロールしても
動かないように
固定してあります。
(background-attachment : fixed;)
背景画像を固定したほうが
文字は読み易いですね。。
     </textarea>
</body>
</html>

background-attachment プロパティ
 ・scroll //  背景画像を固定しない。スクロールする。(既定値)
 ・fixed  //  背景画像を固定する。スクロールしない。
← fixed はウインドウに対する固定表示になるので注意が必要です。
body {
 background-image:url(***.gif);
 background-repeat : repeat-y;
 background-attachment:fixed;
     }


テキストエリアに fixed // scrollを設定してみました。
   * body 以外の要素には使用しないほうが無難ですね。

<body>に fixed // scrollを設定してみました。

   ↑↑JavaScriptで動的にクラス名を付け変えて実行してます。↑↑
  * ウインドウのスクロールバーでスクロールしてください。
      IE7、Firefox3 どちらも正常に動作します。

textarea要素
背景画像
css 背景画像の配置 background-positionプロパティ
背景画像の繰り返し background-repeat プロパティ
背景画像を付ける background-imageプロパティ
スタイルシート CSS
さくらのレンタルサーバ スタンダード
無料レンタルカウンター「デジデジ」
ロリポップ!なら初心者でも安心!
ホームページ簡単作成 「ホムペロリ!」、「woopa!」
CGI簡単設置 「CGI CANDYBOX!」が無料で使えます!!

posted by javaScript at 18:04 | 大阪 ☀ | 背景 背景画像 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。