web-dev-qa-db-de.com

CSS-Hintergrundbild wird nicht geladen

Ich habe alle Tutorials befolgt, die alle das Sagen haben. Ich gebe meinen Hintergrund im Body in meinem CSS-Stylesheet an, aber die Seite zeigt nur einen leeren weißen Hintergrund. Das Bild befindet sich im selben Verzeichnis wie die HTML- und die CSS-Seite. Das Tutorial sagt das

<body background="image.jpeg">

ist veraltet, also verwende ich in css,

body {background: url('image.jpeg');}

kein Erfolg ..__ Hier ist das gesamte CSS-Stylesheet:

body 
{
background-image: url('nickcage.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;        
}
12
jaredad7

hier ist ein anderes Bild-URL-Ergebnis .. funktioniert gut ... Ich habe nur einen Bildpfad gesetzt. Bitte überprüfen Sie es ..

Fiddel: http://jsfiddle.net/287Kw/

body 
{
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;


}
1
Krish

Zunächst einmal winken Sie den Zitaten:

background-image: url(nickcage.jpg); // No quotes around the file name

Wenn sich Ihre HTML-, CSS- und Image-Dateien alle in demselben Verzeichnis befinden, sollten Sie das Entfernen der Anführungszeichen korrigieren. Wenn sich Ihre CSS-Datei oder Ihr Image jedoch in den Unterverzeichnissen Ihrer HTML-Datei befindet, sollten Sie dies überprüfen Sie den richtigen Pfad zum Bild:

background-image: url(../images/nickcage.jpg); // css and image live in subdorectories

background-image: url(images/nickcage.jpg); // css lives with html but images is a subdirectory

Ich hoffe es hilft.

24
Frankenscarf

Ich hatte das gleiche Problem. Das Problem war schließlich der Pfad zur Image-Datei. Stellen Sie sicher, dass der Bildpfad relativ zum Speicherort der CSS-Datei anstelle von HTML ist. 

8
Timothy Carr

Ich bin auf dasselbe Problem gestoßen ... Wenn Sie Ihre Bilder in Ordnern haben, probieren Sie es aus

background-image: url(/resources/img/hero.jpg);

Vergessen Sie nicht, den umgekehrten Schrägstrich vor dem ersten Ordner abzulegen.

3
Andrew Wiley

versuche dies 

background-image: url("/yourimagefolder/yourimage.jpg"); 

Ich hatte das gleiche Problem, als ich background-image: url("yourimagefolder/yourimage.jpg"); verwendete. 

Beachten Sie den Schrägstrich, der den Unterschied gemacht hat. Die Ebene des Ordners war der Grund, warum ich das Bild nicht laden konnte. Ich denke, Sie sind auch auf das gleiche Problem gestoßen 

3
user3670684

für mich arbeitet die folgende Zeile für mich, ich stelle sie in die css meines Körpers (wo sich das Bild im selben Ordner befindet, in dem sich meine css- und .html-Dateien befinden):

background: url('test.jpg');

Eine andere Sache, die Sie beachten müssen, ist, seien Sie vorsichtig bei der Bilderweiterung, stellen Sie sicher, dass Ihr Bild die Erweiterung .jpeg oder .jpg hat. Vielen Dank

2
Usman

Der Pfad zum Bild sollte relativ sein, dh wenn sich die css-Datei im Ordner css befindet, sollten Sie den Pfad mit ../ beginnen, z 

body{
   background-image: url(../images/logo.jpg);
}

dies liegt daran, dass Sie über ../ path und dannimages/logo.jpg -/path zur Image-Datei zurückkehren müssen

body{
   background-image: url(images/logo.jpg);
}
Dieser Code wird einwandfrei funktionieren. 

1
akaMahesh

Ich hatte das Dokumentenstammverzeichnis für meinen mit Wamp-Server installierten Apache-Webserver geändert. Die Verwendung der relativen URL, d. h. (images/img.png), funktionierte nicht. Ich musste die absolute URL verwenden, um zu funktionieren, d. H. 

hintergrundbild: URL (" http: //localhost/project_x/images/img.png ");

0
user3172852

Das Problem bestand darin, dass Sie keine kurze URL für das Bild "img/image.jpg" verwenden können.

sie sollten die vollständige URL " http://www.website.com/img/image.jpg " verwenden, aber ich weiß nicht warum!

0
Omar Albeik

Wenn Sie das Abbild und den Ordner css in einem übergeordneten Verzeichnis ablegen, wenn Sie Assets voraussetzen, funktioniert der folgende Code einwandfrei. Entweder doppelte Anführungszeichen oder ohne doppelte Anführungszeichen funktionieren gut. 

body{
   background: url("../image/bg.jpg");
}

In anderen Fällen, wenn Sie beispielsweise eine Klasse aufrufen und versuchen, ein Hintergrundbild an einem bestimmten Ort abzulegen, müssen Sie auch Höhe und Breite angeben.

0
user1957229

der folgende Code funktionierte für mich, wo ich das Bild in einem Ordner/assets/img/background_some_img.jpg abgelegt hatte

background-image: url('../img/background_some_img.jpg');
background-size: cover;
background-repeat: no-repeat;
0
user7702588

Ich möchte meinen Debugging-Prozess mit Ihnen teilen, da ich mindestens eine Stunde mit diesem Problem beschäftigt war. Das Bild konnte beim Ausführen des lokalen Hosts nicht gefunden werden. Um etwas Kontext hinzuzufügen, stelle ich eine Rails-App im folgenden Verzeichnis ein:

apps/assets/stylesheets/main.scss

Ich wollte das Hintergrundbild im Header-Tag rendern. Das Folgende war meine ursprüngliche Implementierung. 

header {
    text-align: center;
    background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
              url('../images/header.jpg') no-repeat;
              background-blend-mode: multiply;
              background-size: cover;
}

... Als Ergebnis erhielt ich den folgenden Fehler in Rails-Server bzw. der Konsole in Chrome-Entwicklungswerkzeugen:

ActionController::RoutingError (No route matches [GET] "/images/header.jpg")
GET http://localhost:3000/images/header.jpg 404 (Not Found)

Ich habe verschiedene Varianten der URL ausprobiert: 

url('../images/header.jpg') # DID NOT WORK
url('/../images/header.jpg') # DID NOT WORK
url('./../images/header.jpg') # DID NOT WORK

und es hat immer noch nicht funktioniert. Zu diesem Zeitpunkt war ich sehr verwirrt ... Ich entschied mich, den Image-Ordner aus dem Assets-Verzeichnis (das ist der Standard) in das Stylesheets-Verzeichnis zu verschieben, und versuchte die folgenden Variationen der URL:

url('/images/header.jpg') # DID NOT WORK
url('./images/header.jpg') # WORKED
url('images/header.jpg') # WORKED

Ich habe den Konsolen- und Rails-Serverfehler nicht mehr erhalten. Aber das Bild wurde aus irgendeinem Grund immer noch nicht angezeigt. Nachdem ich vorübergehend aufgegeben hatte, fand ich die Lösung dafür, eine Höhe-Eigenschaft hinzuzufügen, damit das Bild angezeigt wird ... 

header {
    text-align: center;
    height: 390px;
    background: linear-gradient(90deg, #d4eece, #d4eece, #d4eece),
              url('images/header.jpg') no-repeat;
              background-blend-mode: multiply;
              background-size: cover;
}

Leider bin ich immer noch nicht sicher, warum die 3 ursprünglichen URL-Versuche mit "../images/header.jpg" auf localhost nicht funktionierten, oder wann ich einen Punkt am Anfang der URL einfügen sollte oder nicht. 

Möglicherweise hat dies etwas damit zu tun, wie das Standard-Link-Tag in application.html.erb eingerichtet wird, oder vielleicht handelt es sich um eine .scss vs. .css-Sache. Oder vielleicht funktioniert die Hintergrundeigenschaft mit url () genau so (das Image muss sich im selben Verzeichnis wie die css-Datei befinden)? Auf jeden Fall habe ich das Problem mit CSS-Hintergrundbildern gelöst, die nicht auf localhost geladen werden. 

0
George.