Using Relative Paths in HTML and CSS

Directory Hierarchy

The root of your website by default is inaccessible. There are only two files that we store in the root folder which are site.css (Which are the styles you've configured in Global Settings) and page.css (Which are the styles you've configured under the CSS tab for any Web Page.)

/
/site.css (Global Settings)
/page.css (Web Page CSS)
/Documents (folder)
/Images (folder)

Files you've uploaded in the File Manager are in these respective locations:

/Documents/MyFile.pdf
/Images/MyFile.jpg

Given the relativity of these files in respect to the Global Settings and Page CSS, you would reference these files using the examples we've provided above, do not use the leading slash. 

In HTML

When referencing files stored in the File Manager using HTML elements, use the following format starting with the leading '/' forward slash.

<img src="/Images/MyFile.jpg" alt="Some File" />

<!-- Or other documents and media -->

<a href="/Documents/files/MyFile.pdf" target="_blank">Download my PDF.</a>

In CSS

When referencing any files stored in the File Manager using CSS in the Global Settings or Page CSS sections of BlueberryCMS, use this format without the leading forward slash.

.my-container {
   background-image: url('Images/MyFile.jpg');
}

If you're using an actual CSS file stored in your File Manager, be sure to specify the correct directory level  using ../../ notation relative to where the CSS file is stored. For example, let's say you have a CSS file and saved it in /Documents/css/style.css and have an image stored in /Images/MyFile.jpg

.my-container {
 background-image: url('../../Images/MyFile.jpg');
}