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
- 回答日時:
直接の回答からは横道に逸れますのでご容赦を。
質問者様の参考にされているコンテンツが必ずしもイ○チキ、というわけではないのですが…
他の回答者様が指摘されている「<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の方がより向いているかと。
No.4
- 回答日時:
>もしよければ具体的にどのようにしたら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がないとだめですよ。
No.2
- 回答日時:
今のところ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でもいいと思います。ですが、それ以外だとデザインを考え直す方がいいと思います。
No.1
- 回答日時:
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 … )
ご意見、そしてリンクありがとうございます。
まだまだかなりな勉強不足自分でも痛感しています。
<table="1">は<table class="1">の間違いです。
CSSのbody内に書いたのはすべて、HTMLから応用しようと思い書いた物です。CSSにただコピーすればいいというわけではないのですね。。。heightが空とはどういう意味でしょうか?
もしよければ具体的にどのようにしたらCSSで背景を全体に表示させることが出来るのか教えていただけますか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
同じ画像 複数回使用
-
PNGがうまく表示されない・・・。
-
<hr>の縦バージョンはありますか?
-
HTMLです 店主のこだわりという...
-
背景画像をリピートさせない方...
-
background-repeat CSS で切れ...
-
画像とその下にあるテキストの...
-
画像の上にテキスト配置で、拡...
-
CSSで背景画像をランダムに表示...
-
背景画像がずれる現象について
-
webページ作っているのですが、...
-
background-sizeの背景で最小値...
-
コーディング中、右側に謎の余...
-
背景を固定し文章だけをスクロール
-
ボタン(画像)をクリックする...
-
スクロールバー
-
背景部分を透けさせてデスクト...
-
画像で背景透明のテキストがに...
-
background-sizeでcontainする...
-
iframe内をクリックさせない方...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
background-sizeでcontainする...
-
【Webサイト】画像が小さく表示...
-
background-sizeの背景で最小値...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
大至急。webのシングルページを...
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
画像上に文字を表示するとiPhon...
-
同じ画像 複数回使用
-
CSSで背景画像をランダムに表示...
-
画面サイズ変更時のレイアウト...
-
要素の幅をいろんな写真の幅に...
-
Chat GTPで、12月のカレンダー...
-
submitボタンの上に重ねた画像...
-
LightBoxの矢印の出し方
おすすめ情報