0

ウィンドウ全体と div とテーブルのコンテンツを覆う引き伸ばされた背景画像を配置したいと考えています。

このコードは正常に動作します:

<!doctype html>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">

<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>

<body>
<div id="bg"><img src="../images/background.jpg" width="100%" height="100%" alt=""></div>
<div id="content">

<table>
<tr>
<td>
<img src="images/1.jpg">
</td>
<td>
<img src="images/2.jpg">
</td>
</tr>
</table>

</div>
</body>
</html>

問題は、表のセル内の画像間の間隔です! 大量の画像を含む非常に大きなテーブルがあると、かなり悪いです。

助けてください！

4

2 に答える 2

2

テーブル div については、それを作り直して background-size: 100% 100%; を追加できます。

<div id ="bg" style="background-image: url(../image/background.jpg); background-size: 100% 100%;">
    <table>
    <!--table stuff-->
    </table>
</div>

明らかに、私のインライン css を css ファイルに引き出したいと思うでしょうが、これで一般的なアイデアが得られます。お使いの IE 6 バージョンでは、CSS3 がサポートされていないため、代わりに背景色を使用したい場合があります。

于 2013-04-02T18:35:09.030 に答える