Calling an image from CSS

Question

• My .html files are all in Assignment1/*.html files
• My CSS file is in Assignment1/style/cssfile.css
• My images are in Assignment1/images/images.png

How do i call an image from Assignment1/style/cssfile.css to Assignment1/images/images.png file?

I can`t do it like the html files as i could just forward the folders to go through. I am trying to do:

.top {background-image: url("Assignment1/images/deco1400.png");}

from the css file to no avail.

How can I reference my image files from my CSS that are in different directories.

Answer 1

try

background-image: url("../images/deco1400.png");

Your tree structure is like

Assignment1
  style
    style.css <- you are here
  images
    img1.png

so either you need to go 1 level up (..) and then enter images OR you need to give absolute path /images/img1.png (note / at the beginning). Both should work, assuming Assignment is your root directory

UPDATE: you might be interested in reading about relative and absolute paths.