CSSを用いた背景画像の表示方法

Question

　お世話になります。

　ホームページ作成の初心者です。

　H1タグ（大見出し）の箇所に、文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、CSSにて背景画像で表示したいと考えております。

　本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。
　ですが、添付画像ファイル（中に、”猫集まれ”と記載したいです）を、HTMLソース内部に、直接書き込みたいと思っております。

　どのようにすればよろしいでしょうか？

　因に、以下の情報を載せさせていただきます。

<h1>猫集まれ！</h1>

url("img/flower10.gif")
background-repeat: no-repeat;
padding-left: 30px;
line-height: 120%;

　ご教示の程、よろしくお願い申し上げます。

猫集まれ！

url("img/flower10.gif") background-repeat: no-repeat; padding-left: 30px; line-height: 120%; 　ご教示の程、よろしくお願い申し上げます。

ORUKA1951 · Accepted Answer

No.2です。真ん中あたり・・

猫集まれ

　と書いてあります。　^^^^^^^^^^^^^^^^^^^^^^^^ もちろん、

　急がば回れ・・・きちんと理解したうえで御利用ください。のほうがSEO的にもネットワーク負荷(早く表示される)と言う意味からも、より良いです。

ORUKA1951 · Answer

＞ホームページ作成の初心者です。　ウェブサイト、ウェブページ(ドキュメント)でしょう。利用する分には問題ないですが、作る立場になると、「ホームページに戻る」ってどこ。「このページをホームページに登録する」って??となっちゃいます。(ホームページとはブラウザを起動したとき最初に表示されるページ、ホーム(基点)と言う意味) ＞H1タグ（大見出し）の箇所に、文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、　重くはなりませんよ。画像はスタイルシートと同様、一度しか読まれませんから・・。スタイルシートから読んだって一緒です。画像を使う場合は、必ずalt属性で代替テキストを入れておかなければなりません。　見出しをスタイルシートで画像を指定するのは、・将来デザインを変更する時にHTMLを書き直さなくてすむ。・ユーザーエージェントごとにデザインを変えることができる。　　印刷用にはテキストで、携帯端末にはシンプルでデータ量の少ない画像で・・　などが目的です。＞本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。　その目的は、プレゼンテーションに関わるものをHTMLには一切記述しないことで、HTMLがシンプルでメンテナンスが容易になり製作コストが低くなること。ひとつのスタイルシートを複数のページで利用するためネットワーク負荷が低減されることです。　「文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、」と矛盾してます。＞ですが、添付画像ファイル（中に、”猫集まれ”と記載したいです）を、HTMLソース内部に、直接書き込みたいと思っております。　スタイルは、・外部スタイルシート・HTMLの内の内・HTML要素のstyle属性　に記述できます。　

猫集まれ

　最後の「HTML要素のstyle属性」は、他の記述とは異なる意味を持ちます。この記述は詳細度が[1,0,0,0]となり、他の場所での指定をすべて上書きしてしまいます。　スタイルシートを用いる最大の利点・ネットワークの負荷を低減する。・HTMLが簡略化され、製作や管理のコストが低減・スタイルシートを変更するだけで、すべてのページのデザインが変更できる・CSS(カスケーディングスタイルシート)の最大の利点、カスケーディングが機能しない　などの問題があります。　　これを使うのは、特定のページの!!!特定の要素!!!のみ、他と異なるスタイルを指定したいときだけという極めて限定された用途にしか使いません。 ※すべてのページに同じスタイルを指定するのでしたら、外部スタイルシートにします。　　特定のページだけなら、内に記述します。(外部CSSの読み込み後) ※HTML要素内のstyle属性での記述は、と比較して負荷は同じというより、逆に少し増えます。　HTMLをシンプルにして文書構造しか書か製作・メンテナンスコストを下げたい　デザインが変更される可能性がある。スタイルシートで自由に変更したい　印刷用など複数のユーザーエージェントでデザインを変更したい　代替スタイルシートを使いたい　ネットワーク負荷を下げたい　などの文書構造とプレゼンテーションの分離というスタイルシートを用いる利点をすべて失うことになります。＞本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。　伝聞(という細切れの情報)ではなく、直接仕様書を確認しましょう。その理由も含めてすべて書かれています。　HTML4.01仕様書(邦訳)/14 スタイルシート　　( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html )

play_with_you · Answer

style属性の話かな？
https://www.google.com/search?q=style%E5%B1%9E%E6%80%A7

ちなみに。
＞H1タグ（大見出し）の箇所に、文字付きの画像を貼付けようと思ったのですが、重くなる、との考えから、CSSにて背景画像で表示したいと考えております。
結局画像は読み込むのだからどっちでも同じ。
＞本来ならば、HTMLファイルとは別途、CSSファイルを作成し、これを読み込ませるのが一般的とお聞きしました。
＞ですが、添付画像ファイル（中に、”猫集まれ”と記載したいです）を、HTMLソース内部に、直接書き込みたいと思っております。
何故そうしたいのかは知らないが、HTMLソースが汚くなるので本当はやらないほうがいい(というか厳密に言えば違反)。

CSSを用いた背景画像の表示方法

No.2です。

＞ホームページ作成の初心者です。

style属性の話かな？

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング