6

現在私はこれを使用しています：

HTML：

<div id="container">
  <img src="x.jpg" id="bg" />
  <div id="content">
   <h1>Welcome to my website.</h1>
   <p>Boo!</p>
  </div>
</div>

CSS：

#bg{
position:absolute;
top:0;
left:0;
height:100%;
z-index:10;
}

#container{
/* max values provided due to the max size of the image available with me(1200x800) */
max-width:1200px;
max-height:800px;
}

#content{
position:absolute;
top:10px;
left:100px;
z-index:100;
}

ここでの利点は、Javascriptをまったく使用していないことです。しかし、その後、絶対的に配置された要素は、別の画面で表示すると悪夢になります。

現在私が持っている解決策は、さまざまな画面サイズに従ってこれらの要素を記述して配置し（たとえば、1024x768のIDコンテンツのトップ値は10pxですが、1280x800のトップ値はtop：25pxなどです）、次のように保存します。別のcssファイルなので、ページの読み込み中に適切なCSSを読み込むことができます。これには時間がかかり、おそらく非効率的だと思います。パーセンテージ値を使用することは、私がまだ検討していないオプションです。エレガントなソリューション、またはabout.meの大物がそれをどのように行うかを知っているなら、それは役に立ちます。

ありがとうございました。

4

1 に答える 1

5

いずれかの値でを使用background-imageしてみましたか？使用することも、必要に応じて使用することもできます。bodybackground-sizecover100% 100%

デモ： http： //jsfiddle.net/ThinkingStiff/UBaN6/

body {
    background-image: url('http://thinkingstiff.com/images/matt.jpg');  
    background-size: cover;  
    background-repeat: no-repeat;
}
于 2011-12-31T19:38:15.417 に答える