0

私のサイトはavidest.com/testにあります。背景画像をページの上部から「オンラインサービス」セクションに移動させようとしています。どういうわけか、早く終わって、黒体の背景が見えるページが一続きあります。この黒い部分を見せたくありません。これがcssです：

.header {
 /*background: #f0f7f7 url(images/header_bg.gif) top repeat-x;*/
    background: transparent;
    padding: 0;
    margin: 0 auto;
    height: 70px;
}

.block_header {
    margin: 0 auto;
    width: 980px;
    padding: 0;
    border: none;
}

.logo {
    float: left;
    padding: 0;
    margin: 0;
    width: 242px;
}

.uppercontain {
    background: url(images/slider_bg.gif) no-repeat;
    background-size: 100%;
    min-width: 1050px;
    min-height: 700px;
}

.slider {
/* background:url(images/slider_bg.gif) no-repeat; background-size: 100%; min-width: 1050px; */
    background: transparent;
    margin: 0 auto;
    padding: 0;
    height: 100%;
}

.slider .gallery {
    margin: 0 auto;
    width: 1050px;
    height: 383px;
    padding: 0;
} /*width was 880px*/
.slider .formbox {
    float: right;
}

ページに表示される方法は次のとおりです。

<body bgcolor="#000000">
    <div class="main">
         <div class="uppercontain">
            <div class="header">
                 <div class="block_header">
                      <div class="logo"><a href="index.html"><img src="images/logo.gif" width="242" height="94" border="0" alt="logo" /></a></div>
                 </div>
            </div>
            <div class="slider">
                 <div class="gallery">
                     <div class="form box"> Form is here </div>
                 </div>
            </div>
         </div>
    Rest of content
    </div>
4

3 に答える 3

2

CSS3はbackground-sizeプロパティを追加します：http ：//www.w3schools.com/cssref/css3_pr_background-size.aspIE9以降で使用できますhttp://caniuse.com/#feat=background-img-opts

それ以外の場合は、より大きな背景画像を使用するか、コンテンツの背後に画像を含むdivを使用するオプションがあります

于 2013-02-26T03:11:44.983 に答える
0

単純。それはあなたのすべてのニーズを修正します。IEで問題なく動作するかどうかはわかりませんが、Firefox、Chrome、Safariでは間違いなく動作します。

background: url('image_Url_here') no-repeat scroll center top/cover transparent;

于 2013-02-26T05:13:15.103 に答える
0

css3バックグラウンドサイズ構文をサポートしないブラウザーとの下位互換性を保つために、フォールバックを含めてからcss3を含めます。

background: url('image_Url_here') no-repeat scroll center center transparent;
background: url('image_Url_here') no-repeat scroll center top/cover transparent;

でテスト済み

firefox v12.0 (stuck on this version cuz mozilla dropped support for WinXP SP1)
Chrome v25.0(.1364 Ubuntu 12.04)
于 2013-08-08T04:10:00.800 に答える