プロが教える店舗＆オフィスのセキュリティ対策術

CSSを使って画像を背景としてウィンドウ全体に表示する方法を探していま

締切済

  • 質問者：mkm3100
  • 質問日時：
  • 回答数：5件

CSSを使って画像を背景としてウィンドウ全体に表示する方法を探しています。

HTMl,CSSともに初心者なので、わかりにくい表現や、ただ単純に方法が間違っているだけかもしれませんが、助言をしていただけると大変助かります。

HTML上から画像を背景全体に表示する方法は下記の方法（http://www5e.biglobe.ne.jp/access_r/hp/html/html …）で行えたのですが、その後Tableなどを作成しCSSで設定しようとすると全く表示されないので、CSSで背景全体に表示されることが出来れば、Tableなども問題なくできるのかなと考えました。しかしネット中を探しても未だにCSSから画像を背景全体に表示する方法を見つけることができません。

CSSから背景全体を表示することは不可能なのでしょうか？
もし背景全体を表示するのは上記のホームページで説明されている通りHTML上で入力しなければならないのでしょうか？そしてその場合、どのようにCSSを使ってTableを表示させるように出来るか教えてください。

今いろいろと試して下記のようにHTMLとCSSに書いたのですが、表示されているのは選択している画像が縦そして横にリピートされているだけです。

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<meta name="generator" content="BBEdit 9.3" charset=UTF-8"/>
<link rel="stylesheet" style type="text/css" href="css.css">
</head>

<body>
<table="1">
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

CSS
@charset "UTF-8";

body {
background-image:url(../images/background.gif);
position:absolute;
width:100%;
height:;
top:0px;
left:0px;
z-index:1;
}
.1　{
width:800pixel;
height:600pixel;
border:10pixel;
}

すいませんが助言していただけると大変感謝いたします。
よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5

  • 回答者： abril
  • 回答日時：

直接の回答からは横道に逸れますのでご容赦を。



質問者様の参考にされているコンテンツが必ずしもイ○チキ、というわけではないのですが…
他の回答者様が指摘されている「<BODY><IMG・・>は間違い、body直下にインライン要素は書けない」というルールは、"それが文法上NGとされる仕様になっている"DOCTYPEを使用している場合の事なので。例えばbody直下にimg要素を記述しても、HTML4.01 TransitionalやXHTML1.0 Transitional等のDOCTYPEが宣言されているならば「間違い」にはなりません。既に紹介されている Another HTML-lint gateway 等で文法チェックをしても（その部分は）通ります。しかし、HTML4.01 Strict、XHTML1.0 Strict、XHTML1.1等のストリクトなDOCTYPEが宣言されているならば、そのDOCTYPE上では「body直下にインライン要素を書いてはだめ」というルールが定められているので「間違い」となります。
質問者様の場合、ご質問文中に書かれたソースを見る限り、XHTML 1.0 Strictという字面通り「ストリクト」なDOCTYPEを宣言しているので、もしそのソースに参考先の文書構造をそのまま持ってこようとすれば、それは文法的には「間違い」となり、推奨されません。

ただ、参考にされたソースはこのDOCTYPE宣言が省略（記載されていない）された文書の為、DOCTYPEを判断する事すらできません。また、更新履歴等をご覧になればおわかりになります通り、かなり古い時代に掲載されたコンテンツの為、もうあまり参考にはなさらない方が賢明なのは確かかと思います。DOCTYPE宣言がないHTML文書でサンプルを提示する様ではちょっと困るので…

それにしてもいち制作者及びいちユーザとしての立場から見ると、背景一杯に本来のサイズではない状態で拡縮された画像が表示されている、という状態はあまり気持ちのよい見え方ではないと思うのですが（実際サンプルのコンテンツなんかも、見栄えが良いとは決して言えないと思います）…考え方としては、No.2様の仰っている通り、色々とテクニックを組み合わせないと各環境で満足できる様な結果を得る事は難しいでしょうし、見た目的に凝ったデザインに拘りたいのであればやはりFlashの方がより向いているかと。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： ORUKA1951
  • 回答日時：

＞もしよければ具体的にどのようにしたらCSSで背景を全体に表示させることが出来るのか



示されたサイトは、インチキですからあてにしないように。
<BODY>
<IMG・・>
なんて間違いです。body直下にインライン要素は書けません。
<BODY>
<P><IMG・・・
となるべきです。
　また、背景画像と書かれていますが、背景画像ではないですね。あくまで画像を表示しているだけ。

　また示されたHTMLやCSSにも、ミスがたくさんあります。pixcelなんて単位はなくてpxですね。4.3.2 長さ（Lengths） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )

　最初のうちこそ、
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
や
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で、一つずつチェックしていく癖をつけましょう。とても大事なステップです。

<body>
<p id="Top">
<img src="" width="180" height="120" alt="背景">
<!-- SEO上一応指定しておく -->
</p>
<div>
<h1>・・・・</h1>
<p>なんとかかんとか</p>
<p>なんとかかんとか</p>
</div>

CSS
html,body{margin:0px;padding:0px;}
p#Top{margin:0px;padding:0px;}
p#Top img{display:block;width:100% ;height:100% ;}
body>div{position:absolute;top:0px;left:0px;}

★p#Top imgは詳細度が102なので、HTML内でスタイルが指定してあったも、それは100なので優先される(スタイルではなく属性値width,heightで指定してある場合は詳細度0)が、もし#を使わずにclassを使うなら!important(最重要宣言)が必要になるので記載しておいた。
★TABLEを書かれていたが、TABLEはデザインのために使うのは非推奨なので、サンプルはdivで指定してある。

　いずれにしても、CSSをきちんと適用させようとすると、色々な意味で正当なHTMLがないとだめですよ。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： metametamu
  • 回答日時：

contentを使う方法は勘違いしていました。


:before擬似要素で画像を表示する方法だったのですが、拡大できません。忘れてください。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： metametamu
  • 回答日時：

今のところcssのbackgroundはそういうことは想定された実装になっていません。

(今後どうなるかはわかりませんが)
それでもやるならwidthとheightを100%に指定したimg要素を使う方法でしょうか。
img要素をposition:fixed;で固定したり、擬似フレームと組み合わせたりして実現する方法です。
ただしデメリットの方が大きいのであまりオススメしません。やるにしてもjavascript等との併用が推奨されると思うので手間ばかりかかります。
この場合CSSだけでなくHTMLとJavascriptが必要になってきます。

一応上記と同じことがcssだけでもできますが、IE7以下を無視することになります。
body{
content:url(image.jpg);
width:100%;
height:100%;
}
contentで画像をbody内に入れる方法です。
ですがやっぱりブラウザの対応度が厳しいです。

あとはflashで実現する方法もありますが、こっちもユーザビリティやアクセシビリティのことを考えるとデザインのためだけに手をだすのは・・・。
例えばプロモーション系のサイトならflashでもいいと思います。ですが、それ以外だとデザインを考え直す方がいいと思います。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

HTMLがおかしい


<table="1">
　ありえません。<table class="1">かな？

bodyにabsoluteて何でしょう。・・head以外のすべての要素はbody内にあるし、bodyはひとつしかないので意味ないと思う。しかもheightが空、それだと背景は見えるはずがない。

HTML/CSSを基本から・・
HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご意見、そしてリンクありがとうございます。

まだまだかなりな勉強不足自分でも痛感しています。

<table="1">は<table class="1">の間違いです。

CSSのbody内に書いたのはすべて、HTMLから応用しようと思い書いた物です。CSSにただコピーすればいいというわけではないのですね。。。heightが空とはどういう意味でしょうか？

もしよければ具体的にどのようにしたらCSSで背景を全体に表示させることが出来るのか教えていただけますか？

通報する
お礼日時：2010/04/30 19:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報