0

100% の背景画像を作成し、画像を背景として使用しようとしています。画像をアップロードすると 100% になりますが、画像が途切れます。画像が画面よりも広くなります。画像の幅が 100% であるのに画像の幅が画面に収まる場合に、途切れることなく修正するにはどうすればよいですか。ここに私のタンブラーがあり、私の言いたいことがわかります ( http://ophelialogy.tumblr.com/ )。ここに完全な画像が表示され、どこが切れているかがわかります ( http://ophelialogy.tumblr.com/ )。 imageshack.us/a/img7/7103/khb3.png )。

これが私のコードです：CSS PART

    /* --- HEADER --- */
#header {
    top: 0;
    left: 0;
    width: 100%;
    {block:IfAdjustableHeader}height:{text:Header Height};{/block:IfAdjustableHeader}
    {block:IfNotAdjustableHeader}height:100%;{/block:IfNotAdjustableHeader}
    position: fixed;
    z-index: 10;
    background-image: url('{image:header}');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


/* --- PAGE CONTENT --- */
#page {
    {block:IfAdjustableHeader}top:{text:Header Height};{/block:IfAdjustableHeader}
    {block:IfNotAdjustableHeader}top:100%;{/block:IfNotAdjustableHeader}
    left: 0;
    width: 100%;
    min-height: 100%;
    position: absolute;
    background: {color:Background};
    z-index: 99;
}

.container {
    margin: 50px auto 0px;
    {block:If400Posts}width: 800px;{/block:If400Posts}
    {block:If500Posts}width: 900px;{/block:If500Posts}
}




/* --- POSTS --- */
.postcol {
    width: 540px;
    margin-left: 240px;
}

.posts {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
} 

.posts img, .posts li, .posts blockquote {
    max-width: 100%;
}

HTML 部分

<body>

<div id="header">
<div class="description">{Description}</div>
</div>


<div id="page">
<div class="container">





<div class="postcol">


{block:Posts}
<div class="posts">
</div>
4

3 に答える 3

0

この優れたブログ投稿は、サードパーティのツールを使用せずに、必要なものを正確に説明しています。

http://css-tricks.com/perfect-full-page-background-image

また、そのための jQuery プラグインがいくつかあります。

于 2013-10-20T18:59:09.310 に答える
0

使用する：

background-image: url(../images/myimage.jpg);
background-size: cover;

ヘッダーまたはメイン ページの背景画像が必要ですか?

現在、ヘッダーにあります。

ページ全体をカバーする場合は、html タグに背景画像を設定します。

それを行うための Nasser のリンクは良いものです (ただし、ブラウザ固有のハックは省きます)。

編集

ああ、あなたは幅について話している。

私はそれが刺激的なスライダー tumblr が右から来ていることと関係があるのではないかと思います - それはあまりにも引き伸ばされています.

これらのスタイルを jsfiddler (または別の別のサイト) で試すことをお勧めします。おそらくうまくいくでしょう。

于 2013-10-20T18:57:59.007 に答える