1

I created a project, I created a HTML file, a CSS file, and a "assets" file, in which I put another file called "images", in which I included a PNG image.

I copy-paste on my CSS the relative path of this image like this :

body {
  background: url(Spaceship/Assets/imgs/bg.jpg);
}

as it didn't work, I tried to copy-paste the path like this :

body {
  background: url(/Users/sylvaindelaplace/Documents/Code/Site/Spaceship/Assets/imgs/bg.jpg);
}

And it still doesn't show !! the page stays completely blank (I'm on Chrome)

j08691
  • 204,283
  • 31
  • 260
  • 272
FarBeyond
  • 33
  • 4
  • What happens if you put the path in quotes (either `'` or `"`)? – Luke Mar 20 '23 at 14:42
  • What happens if you right click on the page in a browser, and then hover over / click the link in Inspector? – display-name-is-missing Mar 20 '23 at 14:44
  • In the browser's debugging tools, is a request made for the image? Is the URL of that request what you expect? What is the server's response? – David Mar 20 '23 at 14:45
  • You say "file" but I think you mean "folder" or "directory". They are very distinct concepts in computer science. URLs in CSS are always relative to the CSS file itself, so you need to tell us where the CSS file is in relation to the image. – Heretic Monkey Mar 20 '23 at 14:46
  • @Luke — Nothing because the URL doesn't include any special characters that would benefit from being quoted. – Quentin Mar 20 '23 at 14:53
  • I will try to be as clear as I can : - I created a new Folder to Workspace in VS Code. - I created a file called "index.HTML" - I created a file called "style.css" - I created a folder called "Assets" - In this folder I created a new folder called "imgs" - in this folder I put a file called "spaceship.jpg" And now the HTML won't show the image either, I entered Spaceship and all the pages shows is a broken icon like it can't display the image. EDIT : now the CSS works when I typed background: url(Assets/imgs/Stars.jpg); – FarBeyond Mar 20 '23 at 15:00

1 Answers1

-1

You can also read : background image

body {
  background-image: url("https://images.unsplash.com/photo-1631631480669-535cc43f2327?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmFja2dyb3VuZCUyMGltYWdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80");
}
Grewal
  • 55
  • 6
  • 1
    You can, but how would that help? If `background: url(x)` doesn't work, `background-image: url(x)` also won't work. (Unless there's a very specific CSS specificity issue, but that doesn't seem like the case here) – DBS Mar 20 '23 at 14:54