wake-up-neo.com

hintergrundbild: URL ("images/plaid.jpg") no-repeat; wird nicht auftauchen

Ich kann mein plaid.jpg anscheinend nicht zum Hintergrund auf einer meiner Seiten machen, ganz zu schweigen davon. Ich habe versucht, es anhand von body, html, * und der spezifischen ID von "home" auszuwählen. nichts funktioniert. Das Bild ist 300 x 421 Pixel groß. Ich brauche es nicht, um hübsch zu erscheinen, ich möchte nur, dass es hinter allem auftaucht. wie würde meine css dafür aussehen? Das Bild plaid.jpg befindet sich in meinem Bilderordner im selben Verzeichnis wie meine index.html-Datei. Dieser Link befindet sich oben in meiner index.html-Datei. und mein Stylesheet befindet sich in meinem Stylesheets-Ordner mit dem Namen mystyles.css.

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

Ich habe versucht, meine .CSS-Datei auf jede denkbare Weise zu verändern. Die ersten 30 Google-Ergebnisse für "Hintergrundbild werden nicht angezeigt" und keiner hat funktioniert. Ich bin mir bewusst, dass es wahrscheinlich etwas einfaches ist.

mystyles.css in seiner einfachsten Form ohne Selektor.

  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 -->

das war nicht erfolgreich

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

das ist was auch in mir ist

<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>
7
codey b

Sie verwenden entweder:

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

... oder

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

... aber definitiv nicht

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

EDIT: Demo unter JSFIDDLE mit absoluten Pfaden (falls Sie Probleme mit relativen Pfaden auf Ihre Bilder haben).

17
JFK

Am wichtigsten

Beachten Sie, dass relative URLs von der URL Ihres Stylesheets aufgelöst werden.

Es funktioniert also, wenn sich der Ordner images im Ordner stylesheets befindet.

Von Ihrer Beschreibung müssten Sie sie in eine der beiden ändern

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

oder

url("/images/plaid.jpg") 

Zusätzliche 1

Sie können auch keinen Selektor haben. 

CSS wird über Selektoren angewendet.


Zusätzliche 2

Sie sollten entweder die Kurzschrift background verwenden, um mehrere Werte wie folgt zu übergeben

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

oder die ausführliche Syntax der Angabe jeder Eigenschaft für sich

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

Wenn dies wirklich alles ist, was in Ihrer CSS-Datei ist, dann passiert ja nichts. Sie benötigen einen Selektor, auch wenn es so einfach ist wie body:

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

Versuche dies:

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

jsfiddle Beispiel: http://jsfiddle.net/Q9Zfa/

3
Sean Keating

Sie können auf zwei Arten debuggen:

  1. Drücken Sie CTRL+U um die Seite Source anzuzeigen. Drücken Sie CTRL+F um "mystyles.css" in der Quelle zu finden. Klicken Sie auf den Link mystyles.css und überprüfen Sie, ob dort nicht "404 not found" angezeigt wird.

  2. Sie können ELEMENT IN FIRBUG PRÜFEN und den Pfad auf Image (Bild) und Set Image height (Höhe) und width (Breite) setzen, da das Bild manchmal nicht angezeigt wird.

Hoffe das kann klappen !!.

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