ホームページ制作 SiGT Web Studio (横浜/フリーランス) > Blog > web制作 > 【css】bodyタグに背景画像を貼り付けて最下部に画像を出したいのにIEで表示できない場合のtips

横浜のフリーランスWeb制作者ブログ

2013年 10月 08日

【css】bodyタグに背景画像を貼り付けて最下部に画像を出したいのにIEで表示できない場合のtips


Plone…ワールドワイドな高級CMS

最近、PloneというCMSの開発にも携わらせていただいています。導入への敷居は高いものの、多彩なワークフローオプションや、柔軟な多言語対応機能、導入後は親しみやすいWYSIWGエディタが支持され、海外では人気が高く、アメリカCIAFBIなど名だたる機関が導入しているようです。こうした特性上、日本国内でも官庁や教育機関では好まれているようです。生成されるコードも大変お綺麗でして、体感的にはSEO面でもかなり力強いですね。Googleもご推奨しているとか、何とか。

最初はちんぷんかんぷんだった私ですが、技術は体で覚えるもの、とはよく言ったもので現場でさまざまな間違いを繰り返しながら、気がつけば結構Ploneにも強くなったような気がする今日この頃です。思えばEC-CUBEを覚えたのも、似たような状況下だったなぁ…。火事場は好きではないのですが、一歩ブレイクアウトするきっかけは、どうも火事場が多い気がします。

そんなわけで、Ploneでの構築や改修案件もバシバシご相談くださいませ。

今日は、Plone特有の技術的なお話し、というわけでは無いのですが、CMSなどでどうしても、「bodyタグに背景画像を貼り付けて尚且つ画面の最下部に表示させたい」場合のtipsです。

メインコンテンツの幅をある程度決めているページの場合で、フッター部分に画像を貼り付けたいとします。その場合はメインコンテンツの一番外側にあるdivタグに対して、背景画像を指定して、「background-position: bottom」とかにしてやれば

divタグに背景画像を貼って問題ないなら問題無い…

こんな感じで背景画像が入ります。しかし、この背景画像だけはブラウザ画面の横幅いっぱいにしたい、という場合はどうでしょうか。

ひとつは、テンプレートを弄って、メインコンテンツの外側に、もう一つ横幅100%のdivを設置してやれば…という考え方。本当はこれが至極真っ当なのですが、Ploneだと少々面倒くさい、というかできればやりたくない。なるべく元のテンプレートを弄らずに、cssなんかで解決出来るものであればそうするのがベスト、というのが私の(少なくとも現段階での)Ploneに対する考え方なのです。

その他のCMSでも似たようなケースはあると思います。この場合、どうするか。もうメインコンテンツの上位にあるbodyタグに背景画像を貼り付けてやるしかありませんなぁ。

そこで、cssにてbodyタグに、背景画像を貼り付けてやります。

1
2
3
body{
  background: url('/画像パス/画像名.png') repeat-x center bottom;
}

こんな感じで。こうすると、ChromeやFirefoxなどの「ちゃんとしてる系」ブラウザでは意図通り、ページの最下部に画面幅いっぱいの背景画像が表示されるのですが、IE8~9ではなぜか何も表示されません。IE7や6ですら表示されるのに…!

bodyタグに背景画像を貼ってbottom指定するとIEで何故か表示されない

上記のbottom指定を外してやると、IE8~9でも画面の最上部に背景画像が表示されるので、完全に無視されているわけでは無さそうです。…だからIE嫌いだよ。

いろんなサイトを調べながらアレコレ弄っているうちに、やっとIE8~9でも画面最下部に幅いっぱいの背景画像が表示されるようになりました。その方法とは…

1
2
3
4
body{
  display: inline-block;
  background: url('/画像パス/画像名.png') repeat-x center bottom;
}

bodyタグに背景画像を貼ってbottom指定して表示をさせる方法はこちら

display: inline-block; …コレを加えることで、何故か解決しました。全く理に適ってないのでキモチワルさ全開なのですが。

というわけで、何故かIEでbodyタグに対してcssで背景画像を高さ指定付きで指定した場合表示されない!というトラブルにお悩みの場合は「display: inline-block;」もセットで指定してみてはいかがでしょうか、というお話しでした。

今年は夏以降もいろいろと忙しくさせていただいております。昨年とはえらい違いです。ありがとうございます。ありがとうございます。引き続き、SiGT Web Studioを宜しくお願い申し上げます。

Posted: 2013年 10月 08日 22:42

Tagged with , ,


Categories: web制作

Comments: No comments


トラックバックURL

コメント & トラックバック

コメントはありません

コメント





コメント本文に次の(X)HTMLタグを使えます:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Gravatarに登録されているアバターを使用します。

Additional comments powered byBackType