Ik heb alle tutorials gevolgd, die allemaal zeggen wat het zegt. Ik specificeer mijn achtergrond in de body in mijn CSS-stijlblad, maar de pagina geeft alleen een lege witte achtergrond weer. Afbeelding bevindt zich in dezelfde map als de .html- en de .css-pagina’s. De tutorial zegt dat
<body background="image.jpeg">
is verouderd, dus ik gebruik, in css,
body {background: url('image.jpeg');}
geen succes.
Hier is het volledige CSS-stijlblad:
body
{
background-image: url('nickcage.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif;
color: red;
}
Antwoord 1, autoriteit 100%
hier is nog een afbeeldings-url-resultaat..werkt prima…ik heb alleen een afbeeldingspad geplaatst..controleer het a.u.b..
Fiddel:http://jsfiddle.net/287Kw/
body
{
background-image: url('https://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;
}
Antwoord 2, autoriteit 95%
Allereerst, vaarwel tegen die citaten:
background-image: url(nickcage.jpg); // No quotes around the file name
Vervolgens, als je html, css en afbeelding allemaal in dezelfde map staan, zou het verwijderen van de aanhalingstekens dit moeten oplossen.
Als uw css of afbeelding zich echter in submappen bevindt van waar uw html zich bevindt, moet u ervoor zorgen dat u het juiste pad naar de afbeelding gebruikt:
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
Hopelijk helpt het.
Antwoord 3, autoriteit 94%
Ik had hetzelfde probleem. Het probleem was uiteindelijk het pad naar het afbeeldingsbestand. Zorg ervoor dat het afbeeldingspad relatief is ten opzichte van de locatie van het CSS-bestand in plaats van de HTML.
Antwoord 4, autoriteit 88%
probeer dit
background-image: url("/yourimagefolder/yourimage.jpg");
Ik had hetzelfde probleem toen ik background-image: url("yourimagefolder/yourimage.jpg");
gebruikte
Let op de schuine streep die het verschil maakte. Het niveau van de map was de reden waarom ik de afbeelding niet kon laden. Ik denk dat je hetzelfde probleem ook tegenkwam
Antwoord 5, autoriteit 88%
Ik kwam hetzelfde probleem tegen.
Als je je afbeeldingen in mappen hebt, probeer dan dit
background-image: url(/resources/img/hero.jpg);
Vergeet niet de backslash voor de eerste map te plaatsen.
Antwoord 6, autoriteit 50%
Ik wil graag mijn foutopsporingsproces delen omdat ik minstens een uur met dit probleem vastzat. Afbeelding kon niet worden gevonden bij het uitvoeren van lokale host. Om wat context toe te voegen, ben ik aan het stylen in een rails-app in de volgende map:
apps/assets/stylesheets/main.scss
Ik wilde een achtergrondafbeelding weergeven in de header-tag. Het volgende was mijn oorspronkelijke implementatie.
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 resultaat kreeg ik de volgende fout in respectievelijk de rails-server en de console in Chrome-ontwikkeltools:
ActionController::RoutingError (No route matches [GET] "/images/header.jpg")
GET http://localhost:3000/images/header.jpg 404 (Not Found)
Ik heb verschillende varianten van de url geprobeerd:
url('../images/header.jpg') # DID NOT WORK
url('/../images/header.jpg') # DID NOT WORK
url('./../images/header.jpg') # DID NOT WORK
en het werkte nog steeds niet. Op dat moment was ik erg in de war… Ik besloot de afbeeldingsmap te verplaatsen van de activamap (wat de standaard is) naar de stylesheets-map en probeerde de volgende variaties van de url:
url('/images/header.jpg') # DID NOT WORK
url('./images/header.jpg') # WORKED
url('images/header.jpg') # WORKED
Ik krijg niet langer de console- en rails-serverfout. Maar om de een of andere reden werd het beeld nog steeds niet weergegeven. Nadat ik het tijdelijk had opgegeven, kwam ik erachter dat de oplossing hiervoor was om een hoogte-eigenschap toe te voegen om de afbeelding te laten zien…
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;
}
Helaas weet ik nog steeds niet waarom de 3 initiële URL-pogingen met “../images/header.jpg” niet werkten op localhost, of wanneer ik wel of niet een punt aan het begin van de URL.
Het kan iets te maken hebben met hoe de standaard link-tag is ingesteld in application.html.erb, of misschien is het een .scss vs .css-ding. Of misschien is dat precies hoe de achtergrondeigenschap met url() werkt (de afbeelding moet zich in dezelfde map bevinden als het css-bestand)? Hoe dan ook, dit is hoe ik het probleem heb opgelost met een CSS-achtergrondafbeelding die niet laadt op localhost.
Antwoord 7, autoriteit 38%
Het pad naar de afbeelding moet relatief zijn, dat betekent dat als het css-bestand in de css-map staat, je het pad moet beginnen met ../zoals
body{
background-image: url(../images/logo.jpg);
}Antwoord 8, autoriteit 25%
voor mij werkt de volgende regel voor mij, ik plaats het in de css van mijn lichaam (waar de afbeelding zich in dezelfde map bevindt als mijn css- en .html-bestanden):
background: url('test.jpg');
Een ander ding waar u om moet geven, is dat u voorzichtig moet zijn met de afbeeldingsextensie en dat uw afbeelding de extensie .jpeg of .jpg heeft. Bedankt
Antwoord 9, autoriteit 12%
Ik ontdekte dat het probleem was dat je geen korte URL kunt gebruiken voor afbeelding “img/image.jpg”
u moet de volledige URL “http://www.website.com/img/image gebruiken .jpg“, maar ik weet niet waarom !!
Antwoord 10
Ik had de documenthoofdmap gewijzigd voor mijn op de wamp-server geïnstalleerde apache-webserver. dus het gebruik van de relatieve url, d.w.z. (images/img.png) werkte niet. Ik moest de absolute url gebruiken om het te laten werken, d.w.z.
background-image:url(“http://localhost/project_x/images/img.png“);
Antwoord 11
Als je de image- en css-map in een bovenliggende map plaatst, veronderstel dan dat assets, dan werkt de volgende code perfect. Ofwel dubbele aanhalingstekens of zonder dubbele aanhalingstekens werken beide prima.
body{
background: url("../image/bg.jpg");
}Antwoord 12
In de Chrome-ontwikkelaarstool kun je zien of de afbeelding is geladen of niet. om dat te zien, inspecteer en gebruik het tabblad CSS-stijl. als de afbeelding daar is geladen, heb je enige tijd de css niet toegevoegd
hoogte: 500px;
eigenschap voor de afbeelding.
yourselector {
background-image: url("photographer.jpg"); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire
container */
}
Antwoord 13
Ik had hetzelfde probleem en na het lezen van dit vond het probleem, het was de schuine streep.
Windows Path:
afbeeldingen \ Green_cup.png
CSS die werkte:
Afbeeldingen / Green_cup.png
Afbeeldingen \ Green_cup.png werkt niet.
Phil
Antwoord 14
De volgende code werkte voor mij waar ik de afbeelding in Somefolder / Assets / IMG / Background_Some_img.jpg
had geplaatst
background-image: url('../img/background_some_img.jpg');
background-size: cover;
background-repeat: no-repeat;
Antwoord 15
Ik kan hier een beetje hulp meenemen … het lijkt erop dat wanneer u background-imago zegt: URL (“/ afbeeldingen / afbeelding.jpg”); of achtergrond-afbeelding: URL (“afbeeldingen / afbeelding.jpg”); of achtergrond-afbeelding: URL (“../ Afbeeldingen / afbeelding.jpg”); Verschillende browsers lijken dit anders te zien. De eerste de browser lijkt dit te zien als domein.com/images/image.jpg …. de tweede de browser ziet op domein.com/css/images/image.jpg …. en de laatste de browser ziet als domein.com/pathtoimageFile/image.jpg … hoopt dat dit helpt