24

ウェブサイトに画像の背景を追加するにはどうすればよいですか？

body {
     margin: 0;
     background: url(background.png);
     background-size: 1440px 800px;
     background-repeat:no-repeatdisplay: compact;
     font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;

私はそれだけのことをしましたが、私のページには何も表示されません。私はCSSの初心者です。

更新しました：

body {
 margin: 0;
 background-image: url(.../img/background.jpg);
 background-size: 1440px 800px;
 background-repeat:no-repeat;
 display: compact;
 font: 13px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
4

9 に答える 9

40

背景のURLを引用符で囲みます。

そのはずbackground: url('background.png');

動作デモについては、こちらをご覧ください。

background-repeat lineまた、2つのステートメントの間にセミコロンがないという問題もあります。あなたの背景が本当に小さい場合、その問題のためにあなたはそれを見ることができません。

解決策を更新するためだけに、他の問題の中でも、バックグラウンドファイルは本来.../background.jpgあるべきときに参照されていました../background.jpg（3つではなく2つのドット）。

于 2012-06-08T16:20:59.850 に答える
6

background-repeatのステートメントは次のステートメントの前に閉じられないため、次の行は正しくありませんdisplay...

background-repeat:no-repeatdisplay: compact;

これはすべきではありません

background-repeat:no-repeat;
display: compact;

（私の経験では）引用符を追加または削除しても、URLが正しい場合は違いはありません。画像へのパスは正しいですか？CSS内のリソースへの相対パスを指定すると、CSSを含むファイルではなく、CSSファイルからの相対パスになります。

于 2012-06-08T16:25:55.213 に答える
2

背景画像を実現するためにHTML、本文、またはラッパー要素に背景画像を追加すると、パディングで問題が発生します。githubでこのチケットhttps://github.com/twitter/bootstrap/issues/3169を確認してください。ShaunRのコメントと、これに対するクリエイターの1人の反応。作成されたチケットで指定された解決策は問題を解決しませんが、レスポンシブ機能を使用していない場合は少なくとも問題は解決します。

レスポンシブ機能のないコンテナを使用していて、幅が960pxで、10pxのパディングを実現したい場合は、次のように設定します。

.container {
   min-width: 940px;
   padding: 10px;
}
于 2013-01-30T03:21:10.387 に答える
2

画像はcssファイルと同じフォルダ/ディレクトリにありますか？その場合、画像のURLは正しいです。そうでなければ、そうではありません。

万が一、フォルダ構造がこんな感じだったら...

webpage
-index.html
-css --- style.css --images ---
background.png
次に
、

cssファイルの画像を参照するには、次のパスを使用する必要があります。

../images/background.png

これが背景になります：url（'../ images / background.png'）;

ロジックは単純です。「../」と入力して（必要な回数だけ）1つのフォルダーに移動します。下に移動するフォルダを指定して、1つのフォルダを下に移動します。

于 2012-06-08T16:31:34.063 に答える
1

以下を追加すると、背景色または画像（CSS）を設定できます

 html { 
     background-image: url('http://yoursite/i/tile.jpg');
     background-repeat: repeat; 
 }

 .body {
     background-color: transparent; 
 }

これは、BSが背景色と.containerクラスにcssルールを適用するためです。

于 2012-07-13T12:15:42.787 に答える
1

また、（美的理由で）背景画像を繰り返すことができない場合、この便利なJQueryプラグインは、ウィンドウに合うように背景画像を拡大します。

バックストレッチ http://srobbin.com/jquery-plugins/backstretch/

よく働く...

〜乾杯！

于 2013-05-20T22:49:24.840 に答える
1 
body {
    background-image: url(your image link);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: cover;
    background-color: #464646;
}
于 2015-03-04T10:41:12.500 に答える
0

モジュール性を高めるため、また、必要な場所に組み込みたい背景画像が多数ある場合は、画像ごとにクラスを作成できます。

.background-image1  
{
background: url(image1.jpg);
 }
.background-image2  
{
background: url(image2.jpg);
 }

次に、divを追加して、必要な場所に画像を挿入します

<div class='background-image1'>
    <div class="page-header text-center", style='margin: 20px 0 0px;'>
         <h1>blabaaboabaon</h1>
    </div>
</div>
于 2014-07-31T16:34:45.600 に答える
0

問題は、スタイルシートのインポートの順序にもある可能性があります。カスタムスタイルシートのインポートをブートストラップのインポートの下に移動する必要がありました。

于 2016-06-30T18:46:20.943 に答える