解決済
タイトル背景の画像幅が右側にだけ広がりません。
こんにちは。またまた分からないことがあったので質問させていただきます。
タイトルの背景(バナー？)のサイズを変えたくて、皆さんの質問回答を参考にしてCSSのbannerを数字は適当に、
#banner{
position: relative;
width:810px;
height:300px;
margin:0 auto;
background:url(http://image.blog.livedoor.jp/sonido_xxx/imgs/8/f/8f15351d.jpg) no-repeat;
}
と変えてみたのですが、右側だけ黒いままです。
これは画像のサイズがいけないのでしょうか？
どうすればタイトル部の右側にもこの画像を背景にできるのでしょうか？
よろしくお願いします。
コメント(10)
上の回答の補足です
8f15351d.jpgの下部に余白がありますね何故でしょう？そのため、heightを小さくしてるの？
とりあえず下の様に変更すれば、背景画像の余白は見えずに全体が表示されると思います。
height:360px;
8f15351d.jpg) 100% 0% no-repeat;
>はちさん
前回に引き続きご回答ありがとうございます！
お借りした画像自体の下部に空白があったのですが特に考慮にいれていませんでした。
おっしゃり通りに直して、
#banner{
position: relative;
width:810px;
height:360px;
margin:0 auto;
background:url(http://image.blog.livedoor.jp/sonido_xxx/imgs/8/f/8f15351d.jpg)100% 0% no-repeat;
}
とやってみたのですが今度はその画像が全く表示されずにタイトル文字だけの表示になってしまいました；
>BLUEPIXY
前回に引き続きご回答ありがとうございます！
横幅はいくら数字を大きくして広げてみても表示が変わらないのです…；
100%の前にスペースが無いですよ！
Firefoxだと見えますがIEでは見えないですね。
>はちさん
空白を入れたら表示されました！
…が今度は右側にだけ偏ってしまいました…；
>>#6
100%だと右端に配置されます。 >>2 の通りです。
0～100の間で丁度良い位置に変更してください。
もし、背景を大きく表示したいなら大きな背景画像が必要です。
画像のサイズを変更して下さい。と言っても借り物の画像ですよね？勝手にサイズ変更はマズイかも？
アーティストの方にお願いし、別の横幅の広い画像を借りた方が良いと思います。
>はちさん
そうですか…
お借りした方に聞いてみます！
細かくご説明ありがとうございました！
ちなみにこの100%の後の0％は何を表しているのでしょうか？
＞ちなみにこの100%の後の0％は何を表しているのでしょうか？
上下方向の位置です。ついでですから背景についてまとめて勉強してみては？
background:url(http://image.blog.livedoor.jp/sonido_xxx/imgs/8/f/8f15351d.jpg) 100% 0% no-repeat;
を個別に書くと下の様になり、こっちの方が判りやすく変更時も楽です。
background-color: transparent;
background-image: url("http://image.blog.livedoor.jp/sonido_xxx/imgs/8/f/...;);
background-attachment: scroll;
background-position: 100% 0%;
background-repeat: no-repeat;
あとは私の説明よりも例えば↓等のほうがわかりやすく間違いもないでしょう。
http://www.htmq.com/style/index.shtml
>はちさん
わざわざありがとうございます！
まだ分からないことばかりですが、自分らしいblogにカスタマイズして行きたいと思います^^
