background:position;left？ ( ネットサービス ) - ほろにがオレンヂ

今回の記事はIE7をお使いの人はバグって見えちゃうかも？

↑
私はIE8に変えたらマトモに見えるようになりました。（例に挙げてるWiki文法ね。。）

この次の記事のアンケートに答えて下さった方、解決方法を教えて下さったこいもさん、

色々模索して下さった柊さん、ありがとうございました。m(_ _)m

https://blogs.yahoo.co.jp/IMG/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_50369133_9?1269801299.gif

||<#FFFFFF'style='background-image:url(http://画像のURL);background-repeat:no-repeat;text-align:left;font-size:8pt;color:#000000;word-spacing:530px;vertical-align:left;background-position : left;' width=500px height=600px'``ココに文字||

上のWiki文法らしきものはよく、知恵袋でお子チャマから質問の上がっている構文です。

（解りやすいように順番はあおいあ式に並び換えています。）

コレを使っても背景画像が全部表示されないけど、どうしたらいいんですか？的な質問が殆どですね・・・。

背景画像が現れないのは当たり前。

画像の幅と高さを示す記述が無いのですから。

文末にそれらしき記述はありますが、今はwidth=500px height=600pxという

記述は反映されなくなっています。

どうせ書くのであれば、画像のサイズに合わせてwidth:500px;height:600pxと書かないとね。

で、vertical-align:left。

コレもおかしな記述なんですよね・・・。

verticalとは『垂直』という意味です。

『垂直』=『縦』の位置を指定する部分に『右』や『左』を指定するのはおかしな話でしょう？

残るは・・・。

background-position : left;・・・。

コレって何だ？

反映されないという事は知っていましたが・・・昨日、ある人に訊かれて『私も知らない・・・。』と

いう事に気付きまして。(^^；)

少し調べてみる事にしました。

私が勉強させて頂いているとほほのスタイルシート入門さんにて・・・。

http://www.tohoho-web.com/css/reference.htm#background-position

◆ background-position: position position (C1/e4/N6)

背景の横方向の位置を left（左端）、center（中央）、right（右端）または 50% のような割合で指定し、縦方向の位置を top（上端）、center（中央）、bottom（下端）または 50% のような割合で指定します。fixed と共に指定することにより、背景画像の表示位置を指定することができます。下記の例では、背景画像を中央にひとつだけ表示します。

BODY {
  background-image: url(image/back.gif);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

要するに、background-attachment:fixedと共に使わないと反映されないって事かな？

ちなみに、fixedを使うと、背景画像が固定され、その他の部分がスクロールする・・・という

動きをします。

　ココに文字。　全角スペースで改行。　

||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_49225512_63?1256641774.png);background-attachment:fixed;vertical-align:text-top;width:530px;height:800px;text-align:center;font-family:"HGP創英角ﾎﾟｯﾌﾟ体";font-size:12pt;color:#000000;word-spacing:510px;line-height:20pt;border:double 5px #FF0000'``　ココに文字。　全角スペースで改行。　[[img(1,1)]]||

↑
スクロールしてみて！

こんな感じの動きをします。

試しに『background-position:center center;』を付加

　ココに文字。　全角スペースで改行。　

||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_49225512_63?1256641774.png);background-repeat:no-repeat;background-attachment:fixed;background-position:center center;vertical-align:text-top;width:530px;height:800px;text-align:center;font-family:"HGP創英角ﾎﾟｯﾌﾟ体";font-size:12pt;color:#000000;word-spacing:510px;line-height:20pt;border:double 5px #FF0000'``　ココに文字。　全角スペースで改行。　[[img(1,1)]]||

試しに『background-position:right top;』（右上）を付加

　ココに文字。　全角スペースで改行。　

||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_49225512_63?1256641774.png);background-repeat:no-repeat;background-attachment:fixed;background-position:right top;vertical-align:text-top;width:530px;height:800px;text-align:center;font-family:"HGP創英角ﾎﾟｯﾌﾟ体";font-size:12pt;color:#000000;word-spacing:510px;line-height:20pt;border:double 5px #FF0000'``　ココに文字。　全角スペースで改行。　[[img(1,1)]]||

な～んにも反映されませんね。

fixedと一緒に使っても反映されないんだから、単に

background-image:url(画像のURL)に使っても無意味・・・だと思います。

（間違っていましたらご指摘を～！）

無駄な記述は出来るだけ・・・省きたいですね。

ほろにがオレンヂ