1

私はウェブページで作業していますが、その中にテキストがあるので、ウィンドウの全幅に拡大したい背景画像を使用しています。これは、何があっても固定位置にしたいのです。画面の解像度はです。私はCSSの実装を探していますが、Javascriptが最善の策である場合は、それを使用するつもりです。

私のページは次のようになります：http：//dl.dropbox.com/u/9134840/demo/windowsxp.html

1080pモニターを使用していない限り、背景画像は端から端まで完全には伸びず、少し空白が残ります。どんな助けでもいただければ幸いです。

html {
}

body {
}

#img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.title {
    position:absolute;
    top:180px; 
    left:350px;
    width:700px; 
    color:Purple;
    font-style:oblique;
    font-family:cursive;  
    text-shadow: 1px 1px;
}

#pre {
    position:absolute;
    top:280px; /* in conjunction with left property, decides the text position */
    left:150px;
    width:700px;
    font-size:large;
    font-family:cursive;
}

#header {
    position:absolute;
    top:530px; 
    left:450px;
    width:700px;
    font-size:x-large;
    font-family:cursive;
}

#sub {
    position:absolute;
    top:580px; 
    left:160px;
    width:1090px;
    font-size:x-large;
    font-family:cursive;
}

HTML

<div id="background">
<img src="back2.png" id="img" class="stretch" alt="" />
4

3 に答える 3

5

background-sizeCSSのプロパティを使用する

ドキュメント：https ：//developer.mozilla.org/en-US/docs/CSS/background-size

于 2012-08-22T18:20:51.853 に答える
2

幅を100％を超えて拡張できます。試す1つのオプション。それ以外の場合は、techfoobarに同意し、background cssプロパティ、特にbackground-sizeを使用します。

于 2012-08-22T18:23:15.037 に答える
0

画像とそのコンテナのマージンを0に、幅を100％に設定します。を使用する<div>必要はありません。例えば：

body
{
    top:0;
    left:0;
    right:0;
    width:100%;
}


#background
{
    top:0;
    left:0;
    right:0;
    width:100%;
}


#img
{
    top:0;
    left:0;
    right:0;
    width:100%;
    position: absolute;
}
于 2012-08-22T18:33:39.643 に答える