web-dev-qa-db-ja.com

background-image：url（ "images / plaid.jpg"）no-repeat;現れない

私のplaid.jpgを私のページの背景にすることはできません。それらすべてはもちろんのこと、本文、html、*、 "home"の特定のIDで選択してみました。何も機能しません。画像は300 x 421ピクセルです。私はそれがきれいに現れるのに必要ではありません、私はそれがすべての後ろに現れるのを望んでいます。私のCSSはこれをどのように探しますか？ plaid.jpgの画像は、index.htmlファイルと同じディレクトリにあるimagesフォルダーにあります。このリンクは、index.htmlファイルの上部にあります。スタイルシートはmystyles.cssという名前のスタイルシートフォルダにあります。

<link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css">

私の考えでは、考えられるあらゆる方法で.CSSファイルを変更してみました。 「背景画像が表示されない」の最初の30件のGoogle検索結果は機能しませんでした。それはおそらく単純なものだと私は知っています。

mystyles.cssは最も基本的な形式で、セレクターはありません。

  background-image: url("images/plaid.jpg") no-repeat;

index.html

 <body>
        <!-- Page: home -->
            <div id="home"
                data-role="page"
                data-title="Home">
                <div data-role="header"
                    data-position="fixed"
                    data-theme="b">
                    <h1>Home</h1>
                    <a href="#info"
                        data-icon="info"
                        data-iconpos="notext"
                        data-rel="dialog"
                        class="ui-btn-right"
                        >Info</a>
                </div><!-- header -->
                <div data-role="content">

                <div data-role="controlgroup" data-theme="e">
                    <a href="#blog" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Blog</a>
                    <a href="#videos" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Videos</a>
                    <a href="#photos" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Photos</a>
                    <a href="#tweets" 
                        data-role="button"
                        data-icon="arrow-r"
                         data-theme="e"
                    >Tweets</a>
                </div><!-- links -->
                </div> <!-- content -->
            </div><!-- page -->

これは成功しなかった

body {
    background-image: url("/images/plaid.jpg");
    background-repeat: no-repeat;
}

これも私の中身です

<head>
    <meta charset="utf-8" />
    <title>Mob App</title>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <link rel="shortcut icon" href="images/favicon.ico" /> 

    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />-->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script src="javascripts/myscript.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css" />
    </head>
jquerycssbackgroundstylesheet
7
codey b

あなたはどちらかを使用します：

background-image: url("images/plaid.jpg");
background-repeat: no-repeat;

...または

background: transparent url("images/plaid.jpg") top left no-repeat;

...しかし断定的にではない

background-image: url("images/plaid.jpg") no-repeat;

[〜＃〜] edit [〜＃〜]：[〜＃〜]でデモjsfiddle [〜＃〜]絶対パスを使用します（相対パスでイメージを参照するときに問題が発生した場合）。

17
JFK

最も重要

相対URLはスタイルシートのURLから解決されることに注意してください。

したがって、フォルダimagesがstylesheetsフォルダ内にある場合に機能します。

あなたの説明から、どちらかに変更する必要があります

url("../images/plaid.jpg")

または

url("/images/plaid.jpg")

追加1

また、セレクタがないことはできません。

CSSはセレクターを介して適用されます。

追加2

このように複数の値を渡すには、省略形backgroundを使用する必要があります

background: url("../images/plaid.jpg") no-repeat;

または、各プロパティを独自に指定する詳細な構文

background-image: url("../images/plaid.jpg");
background-repeat:no-repeat;
4
Gabriele Petrioli

それが本当にCSSファイルにあるすべてであるならば、はい、何も起こりません。 bodyのように単純であっても、セレクターが必要です。

body {
    background-image: url(...);
}
3
duskwuff

これを試して：

body
{ 
    background:url("images/plaid.jpg") no-repeat fixed center;
}

jsfiddleの例： http://jsfiddle.net/Q9Zfa/

3
Sean Keating

次の2つの方法でデバッグできます。

  1. 押す CTRL+U ページのソースを表示します。押す CTRL+F ソースで "mystyles.css"を検索します。 mystyles.cssリンクをクリックして、「404 not found」が表示されていないか確認してください。

  2. ときどき画像が表示されないため、エレメントをFIRBUGで検査してパスをImageに設定し、Imageの高さと幅を設定できます。

これがうまくいくことを願っています!!.

1
Surinder ツ
    <style>
    background: url(images/Untitled-2.fw.png);
background-repeat:no-repeat;
background-position:center;
background-size: cover;
    </style>
0
Raimac