CSS Hintergrundbild wird nicht geladen

Ich habe all die tutorials, die alle sagen, die sagen, was. Ich geben Sie mein hintergrund im inneren des Körpers, in meinem css-Stylesheet, aber die Seite zeigt nur eine leere weiße hintergrund. Bild ist im selben Verzeichnis wie die .html und die .css-Seiten. Das tutorial sagt, dass

<body background="image.jpeg">

ist veraltet, so dass ich in css,

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

keinen Erfolg.
Hier ist die 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;        
}

wo setzen Sie Bild? die Ordner? "images" - Ordner? wenn Sie versuchen, in jsfiddle?
bitte überprüfen Sie Ihre Bild-Erweiterung....
Versuchen Sie [STRG] + [F5], um die Festplatte aktualisieren Sie die Seite im browser. Vielleicht ist es nur ein caching problem. Und wie Nikhil sagte: Suche für Tippfehler im Allgemeinen 😉
1 Sache..eine Inspect element im chrome, wählen Sie die body tag & klicken Sie dann auf die img im body Stil....Ihr öffnet oder nicht?
Bild-Erweiterung ist richtig, war eines der ersten Dinge, die ich überprüft

InformationsquelleAutor jaredad7 | 2014-01-27

1

hier ist eine andere Bild-url Ergebnis..funktioniert Prima...ich bin einfach nur ein Bild Weg..bitte..

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;


}
```
Ok, deins hat funktioniert, aber ich hatte versucht, Bild Pfade, um online-urls vor, die nicht gearbeitet hatte. Können Sie sich einen Grund denken, warum dies eine speziell gearbeitet hat, andere aber nicht?
vielleicht browser-cache (Strg+f5 drücken) - oder image-problem Erweiterung...plz checken Fall .es wird in Ordnung sein

InformationsquelleAutor Krish
23

Zunächst, wave bye-bye, um jene Zitate:
```
background-image: url(nickcage.jpg); //No quotes around the file name
```
Nächsten, wenn Sie Ihre html -, css-und Bild-sind alle im gleichen Verzeichnis, dann entfernen die Anführungszeichen, sollte es beheben.
Aber, wenn deine css oder Bild sind in Unterverzeichnisse, wo Sie Ihre html-lebt, werden Sie wollen, stellen Sie sicher, korrekt 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
```
Hoffe, es hilft.

Wird diese Arbeit, wenn der img-name hat einen Platz in Ihr?
Ursprünglich hatte ich es außerhalb der Anführungszeichen, und es hat nicht funktioniert. Habe gerade versucht das nochmal; hat nicht funktioniert.
Wenn Sie einfache Anführungszeichen verwenden, wird nur zu Problemen führen, auf IE/Mac, die nicht selbst laufen auf einem modernen Mac.
Zitate nicht zu einem problem für mich.
Anführungszeichen sind optional, für die meisten Teil; beim Umgang mit Sonderzeichen und Leerzeichen, Anführungszeichen notwendig werden. Zitate waren nicht das Problem, nur ein unnötiges ärgernis/nutzlos bytes/mögliche Tippfehler Futter.

InformationsquelleAutor Frankenscarf
8

Ich hatte das gleiche Problem. Das problem endete als der Pfad zu der image-Datei. Stellen Sie sicher, dass der Bild-Pfad relativ zum Speicherort der CSS-Datei statt der HTML.

InformationsquelleAutor Timothy Carr
3

versuchen, diese
```
background-image: url("/yourimagefolder/yourimage.jpg"); 
```
Ich hatte das gleiche problem, wenn ich background-image: url("yourimagefolder/yourimage.jpg");

Beachten Sie den Schrägstrich, die den Unterschied gemacht. Die Ebene der Ordner war auch der Grund, warum ich konnte nicht das Bild laden. Ich denke, Sie auch begegnet das gleiche Problem

Wenn Sie könnten bitte Bearbeiten Sie Ihre Antwort und erklären Sie, was Sie den code zeigen Sie uns nicht, und warum/wie, der code beantwortet die Frage, könnte es wirklich helfen.

InformationsquelleAutor user3670684
2

mir folgende Zeile wird für mich arbeiten , ich habe es in die css von meinem Körper ( wo das Bild liegt im gleichen Ordner, in dem meine css-und .html-Dateien ) :
```
background: url('test.jpg');
```
Andere Sache, die müssen Sie sich kümmern, ist , vorsichtig sein, über die Bild-Erweiterung , sicher sein, dass Sie Ihr Bild .jpeg oder .jpg-Erweiterung. Dank

InformationsquelleAutor Usman
2

Ich lief in das gleiche problem.
Wenn Sie Ihre Bilder in Ordnern, dann versuchen Sie, diese
```
background-image: url(/resources/img/hero.jpg);
```
Vergessen Sie nicht, setzen Sie den backslash vor dem ersten Ordner.

InformationsquelleAutor Andrew Wiley
0

Habe das problem gefunden wurde, die Sie nicht verwenden können, kurz-URL für Bild "img/image.jpg"

sollten Sie den vollständigen URL "http://www.website.com/img/image.jpg", aber ich weiß nicht, warum !!

InformationsquelleAutor omaralbeik
0

Hatte ich verändert den Dokument-root für mein wamp-server installiert apache web server. also mit der relativen url, d.h. (images/img.png) hat nicht funktioniert. Ich musste die absolute url ein, um für Sie zu arbeiten, d.h.

background-image:url("http://localhost/project_x/images/img.png");

InformationsquelleAutor user3172852
0

den folgenden code funktionierte für mich, wo ich das Bild in somefolder/assets/img/background_some_img.jpg
```
background-image: url('../img/background_some_img.jpg');
background-size: cover;
background-repeat: no-repeat;
```
InformationsquelleAutor user7702588
0

Ich würde gerne meine debugging-Prozess, da war ich festgefahren auf dieses Problem für mindestens eine Stunde. Bild konnte nicht gefunden werden beim ausführen der lokalen host. Fügen Sie einige Kontext, ich bin styling innerhalb einer rails-app in das folgende Verzeichnis:
```
apps/assets/stylesheets/main.scss
```
Wollte ich render-Hintergrundbild im header-tag. 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;
}
```
...damit war ich immer die folgenden Fehler im rails-server und die-Konsole in Chrome dev tools, beziehungsweise:
```
ActionController::RoutingError (No route matches [GET] "/images/header.jpg")
GET http://localhost:3000/images/header.jpg 404 (Not Found)
```
Ich habe versucht, verschiedene Variationen der url:
```
url('../images/header.jpg') # DID NOT WORK
url('/../images/header.jpg') # DID NOT WORK
url('./../images/header.jpg') # DID NOT WORK
```
und es immer noch nicht. An diesem Punkt war ich sehr verwirrt...habe ich beschlossen, verschieben Sie den Bild-Ordner aus dem Verzeichnis "assets" (das ist der Standard), die innerhalb des stylesheets-Verzeichnis und versucht, die folgenden Varianten der url:
```
url('/images/header.jpg') # DID NOT WORK
url('./images/header.jpg') # WORKED
url('images/header.jpg') # WORKED
```
Ich nicht mehr hab die Konsole und rails server-Fehler. Aber das Bild war immer noch nicht zeigen aus irgendeinem Grund. Nach vorübergehend aufzugeben, fand ich die Lösung zu dieser wurde Sie zum hinzufügen eines height-Eigenschaft, damit das Bild angezeigt werden...
```
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 noch nicht sicher, warum die 3 Start-url versucht mit "../images/header.jpg" hat nicht funktioniert auf localhost, oder wenn ich sollte oder sollte nicht sein, das hinzufügen einer Periode am Anfang der url.

Könnte es etwas damit zu tun haben, wie die Standard-link-tag ist das setup in der Anwendung.html-Code.erb, oder vielleicht ist es auch eine .scss vs .css-Sache. Oder vielleicht, dass ist nur, wie die background-Eigenschaft mit url() funktioniert (das Bild muss im gleichen Verzeichnis wie die css-Datei)? Dies ist jedenfalls, wie ich das Problem gelöst, mit CSS background-image nicht laden auf localhost.

InformationsquelleAutor George.
-1

Ich hatte das gleiche problem und nach dem Lesen dieses das Problem entdeckt, es war der slash.
Windows-Pfad:
images\green_cup.png

CSS, die funktioniert hat:
Bilder/green_cup.png

images\green_cup.png funktioniert nicht.

Phil

InformationsquelleAutor PCSailor
-1

bring ich ein wenig Hilfe hier... es scheint, dass, wenn Sie sagen background-image: url("/images/image.jpg"); oder background-image: url("images/image.jpg"); oder background-image: url("../images/image.jpg"); andere Browser scheinen das anders sehen. die ersten der browser scheint um zu sehen, wie domain.com/images/image.jpg.... die zweite der browser sieht domain.com/css/images/image.jpg.... und das Finale in der browser sieht domain.com/PathToImageFile/image.jpg... hofft, dass dies hilft

Haben Sie versuchen, es selbst? Sorry, aber ich glaube nicht, dass deine Lösung richtig ist.
versuchen Sie es selbst mit google-Entwickler-tools, prüfen... können Sie bewegen Sie den Mauszeiger über die ("../images/image.jpg") link und geben Sie den Namen der url... trial-and-error zeigte mir, was passiert war.
sorry, Sie sind richtig, der erste und der zweite ausgeschaltet sind... "images/images.jpg" gesehen /css/images/image.jpg und "/images/images.jpg"ist nur /images/image.jpg... sry, dass über

InformationsquelleAutor tay

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.