0

私はphpbbフォーラムでCSSを使用しており、自分のバックグラウンドを適合させようとしています。

何をしているのかを知りたい場合は、サイトはhttp://bofb.orgです。

とにかく、私はページを引き伸ばすために背景を取得しようとしていますが、ブラウザのサイズが異なる場合は最小幅にします。

私はこれを試しました：

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #828282;
    background-color: #FFFFFF;
    /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
    font-size: 10px;
    margin: 0;
    padding: 12px 0;
    background-image: url("{T_THEME_PATH}/images/bg_wrap.png") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

私の画像はこれではまったく表示されません。このサイトから入手しました。

私がこれを行う場合：

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #828282;
    background-color: #FFFFFF;
    /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
    font-size: 10px;
    margin: 0;
    padding: 12px 0;
    background-image: url("{T_THEME_PATH}/images/bg_wrap.png");
   background-size:100%;
}

画面の解像度が低くなるか、ウィンドウが小さくなるまで、問題なく表示されます。

理想的には、これをページの中央に特定の幅で繰り返して配置したいのですが、それも機能しません。

誰か提案がありますか？

4

4 に答える 4

1

これは、希望どおりに機能するはずです。ただし、大画面で背景画像が途切れないように、背景色を定義する必要があります。

background: url("./styles/reds/theme/images/bg_wrap.png") repeat-y center center fixed;

あなたは私の答えを受け入れていないので（これは正しいです）、ここに体のフルスタイルのクラスがあります：

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #828282;
    background-color: #FFFFFF;
    font-size: 10px;
    margin: 0;
    padding: 12px 0;
    background: url("./styles/reds/theme/images/bg_wrap.png") repeat-y center center fixed; 
}

backgroud-colorを変更して白い境界線を削除し、html {..} cssclassplzを削除します。htmlタグはスタイリングされるべきではありません

于 2013-01-07T16:49:24.800 に答える
0

CSSに追加

body, html{
    width:100%;
    height:100%
}

2回目の試行：

html{
    width:100%;
    height:100%;
}
body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    color: #828282;
    background-color: #FFFFFF;
    /*font-size: 62.5%;          This sets the default font size to be equivalent to 10px */
    font-size: 10px;
    margin: 0;
    padding: 12px 0;
    background: url("{T_THEME_PATH}/images/bg_wrap.png") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
}
于 2013-01-07T16:44:32.007 に答える
0

css-tricksから取得したcssが正しくコピーされていません。background-image：ではなくbackground：を使用してみてください

于 2013-01-07T16:47:01.697 に答える
0

画面全体に収まらないphpbbの画像の背景がありました。本文とHTMLの両方に幅と高さを100％追加しましたが、修正されませんでした。最後に、本文だけでなく、html要素にも背景画像を定義しました。トリックをするように見えた。

于 2013-04-13T10:40:48.327 に答える