Ik heb een HTML-bestand met een submap met de naam img met een afbeelding met de naam debut_dark.png. In mijn CSS-bestand heb ik:
body {
background: url(/img/debut_dark.png) repeat 0 0;
}
Het HTML-bestand heeft de body-tag en bevat het juiste CSS-bestand. Ik weet zeker dat het CSS-bestand correct is opgenomen, aangezien al het andere correct is geformatteerd.
De achtergrondafbeelding wordt niet weergegeven, ik zie alleen een witte achtergrond. Enig idee hoe dit op te lossen, of zelfs hoe het te debuggen?
Antwoord 1, autoriteit 100%
Volgens uw CSS-bestandspad, neem ik aan dat het zich in dezelfde map bevindt als uw HTML-pagina, u moet de url als volgt wijzigen:
body { background: url(img/debut_dark.png) repeat 0 0; }
Antwoord 2, autoriteit 67%
U zou als volgt moeten gebruiken:
lichaam {
achtergrond: url("img/debut_dark.png") herhaal 0 0;
}
lichaam {
achtergrond: url("../img/debut_dark.png") herhaal 0 0;
}
lichaam {
achtergrondafbeelding: url("../img/debut_dark.png") herhaal 0 0;
}
of probeer CSS-regels te inspecteren met de Firefox Firebug-tool.
Antwoord 3, autoriteit 29%
Ik weet dat dit niet het exacte geval van de OP behandelt, maar voor anderen die van Google komen, vergeet niet om display: block; te proberen op basis van het elementtype. Ik had de afbeelding in een <i>, maar hij verscheen niet…
Antwoord 4, autoriteit 21%
Zorg ervoor dat je lichaam een lengte heeft, bijv.:
body {
background: url(/img/debut_dark.png) repeat;
min-height: 100%;
}
Antwoord 5, autoriteit 21%
Ik heb hetzelfde probleem. Maar het werkt naar behoren voor mij
background: url(../img/debut_dark.png) repeat
Antwoord 6, autoriteit 12%
Je moet een relatief pad in de URL gebruiken. Ik denk dat je twee mappen hebt gemaakt in de hoofdmap waar je index.html zich bevindt. Een daarvan is de map ‘CSS’ & een andere is de map ‘img’.
Als u nu de map ‘img’ in css-bestanden moet openen. U moet dus één keer teruggaan in de hoofdmap met de syntaxis “../”. Ga vervolgens naar de map ‘img’ met de syntaxis “../img”. Schrijf dan de afbeeldingsnaam “../img/debut_dark.png”.
body {
background: url("../img/debut_dark.png") repeat 0 0;
}
Antwoord 7, autoriteit 8%
body {
background: url("../img/debut_dark.png") no-repeat center center fixed;
}
Werkte voor mij.
Antwoord 8, autoriteit 8%
Het is altijd goed om deze extra eigenschappen te hebben naast de
background-image:url(‘path’) no-repeat 0 0;
-
dimensie instellen op het element
breedte:x;
hoogte:y; -
achtergrondgrootte:100%
- Deze eigenschap helpt de afbeelding aan te passen aan de bovenstaande dimensie die u voor een element definieert.
Antwoord 9, autoriteit 8%
Ik had hetzelfde probleem. Voor mij werkte het met:
background: url("../img/green.jpg") no-repeat center bottom/cover;
height: 100vh;
Antwoord 10, autoriteit 4%
Ik gebruik embedded CSS op een lokale computer. Ik plaatste het atom.jpg-bestand in dezelfde map als mijn html-bestand, toen werkte deze code:
background-image:url(atom.jpg);
Antwoord 11
Nou, ik ben erachter gekomen dat dit attribuut een afbeelding weergeeft wanneer de volledige locatie erin wordt opgegeven. Ik heb die afbeelding gewoon op mijn server geüpload en de locatie van die afbeelding gekoppeld in de background-image:url(“xxxxx.xxx”); attribuut en het werkte uiteindelijk, maar als jullie geen server hebben, probeer dan de volledige locatie van de afbeelding in het attribuut in te voeren door naar de eigenschap van die afbeelding te gaan. Hoewel ik dit attribuut gebruikte in de tag van een HTML-bestand, maar het zal zeker ook werken op een CSS-bestand. Als die methode niet werkte, probeer dan je afbeelding te uploaden op internet zoals behance, facebook, instagram, enz. en inspecteer de afbeelding en kopieer die locatie naar je attribuut. Hoop dat dit zal werken
Antwoord 12
Ik had hetzelfde probleem, nadat ik het herhaal 0 0-gedeelte had verwijderd, was mijn probleem opgelost.
Antwoord 13
Als je pad correct is, denk ik dat je geen enkel element in je body-sectie hebt.
Definieer gewoon de hoogte van het lichaam en uw code zal werken.
Antwoord 14
background : url (/img.. )
OPMERKING: als je je css in een andere map hebt staan, zorg er dan voor dat je het afbeeldingspad begint met THE FORWARD SLASH.
Het werkte voor mij. !
Antwoord 15
In deze vraag gaan we beschrijven hoe je externe css kunt gebruiken voor het bellen naar afbeeldingen
vind ik leuk: assets/images/laravelamit.jpg
dan moet je naar assets/css/style.css gaan en openen en plaatsen
achtergrond: url(../images/laravelamit.jpg);
Antwoord 16
Als u lokaal ontwikkelt
Controleer of u SCSS naar CSS verwerkt
Live sass-compiler in VSCode
Antwoord 17
Het probleem zit hem in het bestandspad.
De schuine streep aan het begin van de url zorgt ervoor dat het bestand in de root wordt gezocht. Als je dat verwijdert, wordt het een pad ten opzichte van dit CSS-bestand – zoals dit:
background-image: url(img/debut_dark.png);
Als je Atom gebruikt, bevat het kopiëren van het projectpad van de afbeelding soms een schuine streep naar voren in het gekopieerde pad, dus wees voorzichtig.
Antwoord 18
als je vs-code gebruikt, probeer het dan gewoon
achtergrond:url(“img/bimg.jpg”)
in plaats van achtergrond:url(‘img/bimg.jpg’)
De mijne werkte eraan
Niets veel ik heb ‘ vervangen door “