• 文字サイズ
  • 小
  • 中
  • 大


解決済

h1の背景を画像にして、その上に文字を重ねたい

  • 相談者：非公開
  • 2016/04/19 15:24
お世話になっております。

h1の背景に画像を設定し、その上に文字を重ねたいです。

以下のように組み立てているのですが、文字が表示されません。
どのようにすればよいでしょうか。

よろしくお願いいたします。

<style type="text/css">
<!--
.bace{
margin:0 auto;
background-color:#ffffff;
width:730px;
}

h1{background: url(http://gigaplus.makeshop.jp/morinoen/category/irekata3.jpg) no-repeat;
width:730px; height:50px;}

-->

</style>

<div class="bace">
<h1>ほうじ茶のおいしい淹れ方</h1>

</div>
キーワード：css、h1、html
投稿内容について報告する
今気になってる疑問、
セミナーに参加すれば解決するかも！？
日本全国のネットショップ12,000社が参加！
ネットショップでお悩みがある方はまずはオンラインセミナーへGO！
セミナー詳細はこちら
広告０円で楽天の売上アップ続出！
ECマスターズチャンネルをチェック！
総視聴回数15万回突破！
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください！
ご視聴はこちら

  • 返信者：非公開
  • 2016/04/19 19:29
ECマスターズの田中です。

<h1>タグに対する規則（h1{ から } の間）に、

text-align:center;

という属性を加えてい………（省略）………
  • 返信者：非公開（質問者）
  • 2016/04/19 19:51
田中様

ご回答ありがとうございます。
h1の画像も表示されないのですが、何が問題でしょうか。

こちらのurlのページです。
http://www………（省略）………
  • 返信者：非公開
  • 2016/04/19 20:26
ECマスターズの田中です。

最初に、いただいた<style>タグの中で、
.base{ の後ろにあるべき } が記入されていないため、
その後ろにある………（省略）………
  • 返信者：非公開（質問者）
  • 2016/04/19 22:51
田中様

ご回答ありがとうございます。
早速修正させて頂いましたが、text-indent:-9999pxを解除することで「ほうじ茶のおいしい淹れ方」とい………（省略）………
  • 返信者：非公開
  • 2016/04/20 10:32
ECマスターズの田中です。

＞背景画像が表示されません。なぜでしょうか。

改めてCSSを確認したところ、
h1に対する規則のbackground-………（省略）………
  • 返信者：非公開（質問者）
  • 2016/04/20 11:55
田中様

無事設定ができました。ありがとうございます！

今、以下のurlに
http://www.morinoen.com/html/page50.………（省略）………
  • 返信者：非公開
  • 2016/04/20 12:45
ECマスターズの田中です。

h1タグが１つのページに複数入っていても、
表示上では特に問題はありません。

厳密に、文書としての構造を考えると、
………（省略）………
  • 返信者：非公開（質問者）
  • 2016/04/20 15:01
田中様


詳しくご回答ありがとうございます。
理解いたしました。………（省略）………
このフォーラムへの質問は終了しました
質問を検索する
返信も検索対象にする

カテゴリーから探す