GitHub pages - issues with relative URLs in CSS

Question

I am trying to set up a github pages site using Jekyll. My approach is to upload contents of _site into root of repo and reference assets via relative URL.

Below are some snippets of relevant code that is calling folders:

CSS:

@font-face {
    font-family: supermario;
    src: url('/dpd/font/fontfamily.ttf');
}

.scenery {
  position: absolute;
  background:url('/img/image1.gif');
}

.image2 {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  background-image:url('/img/image2.png');
}

.icon2 {
  background-image:url('/img/icon2.png');
  width: 30px;
  height: 30px;
  position: absolute;
  bottom: $floorheight;
  background-position-x: 350px;
  z-index: 5;
  transform: scaleX(-1);
}

HTML:

<link rel="stylesheet" href="build/css/styles.css">
<script src="dpd/jquery-3.2.1.min.js"></script>

<script src="build/js/app.js"></script>

My HTML elements are loading with the correct URL structure. It is as follows:

myusername.github.io/repository-name/build/js/app.js
myusername.github.io/repository-name/build/css/styles.css

My CSS URLs are not loading correctly...they look like:

myusername.github.io/img/icon1.png
myusername.github.io/img/icon2.png

And so on, which is generating 404s.

EDIT: I have a gulptask which helps run Jekyll - it looks like so:

//server + file watching 
gulp.task('serve', function() {

    browserSync.init({
        server: "_site"
    });

    gulp.watch("dev/scss/*.scss", ['styles', 'jekyll']);
    gulp.watch('dev/js/*.js', ['scripts', 'jekyll']);
    gulp.watch('_includes/*.html', ['jekyll']).on('change', browserSync.reload);
    gulp.watch('_site').on('change', browserSync.reload);

});


gulp.task('jekyll', function(gulpCallBack){
    var spawn = require('child_process').spawn;
    // After build: cleanup HTML
    var jekyll = spawn('jekyll', ['build'], {stdio: 'inherit'});

    jekyll.on('exit', function(code) {
        gulpCallBack(code === 0 ? null : 'ERROR: Jekyll process exited with code: '+code);
    });
});

I tried a few things that didn't remedy the solution:

Changing to relative paths ../
removing the forward slash so it looks like: background-image:url('/img/icon.png');
moving the img folder to the root directory of the project

Is there an extra step that I am missing? Does anyone have any suggestions on how to do this better?

Is the img directory in the build directory? In that case a relative url like this should definitely be the way to go: background-image:url('../img/image2.png'); — Maarten van Tjonger
You probably came closest with #2. You are actually using Absolute URLs in the CSS (when they begin with a slash). It looks like some other answers here are clearing it up. — anonymous coward
When using relative URLs in CSS, the URL is relative to the CSS file itself. (See: stackoverflow.com/questions/940451). In your example, if you only removed the beginning slash, then img/icon.png would reference repo-name/build/css/img/icon.png, assuming your CSS is at repo-name/build/css/styles.css, for example. — anonymous coward

marcanuy marcanuy · Accepted Answer · 2017-07-25T22:15:25

Considering you have urls like myusername.github.io/repository-name/.., you need to fix relative paths using absolute_url and adding base_url in _config.yml:

<link rel="stylesheet" href="{{'/build/css/styles.css'|absolute_url}}">
<script src="{{'/dpd/jquery-3.2.1.min.js'|absolute_url}}"></script>

<script src="{{ '/build/js/app.js'|absolute_url}}"></script>

Then in _config.yml:

baseurl: '/repository-name'

To fix images paths in CSS you can adjust them "manually" using the url like /repository-name/css/... or use absolute_url again making Jekyll process the file adding three - at the beginning like this, in the CSS file:

---
---
.image2 {
   background-image:url({{'/img/image2.png'|absolute_url}});
}

GitHub pages - issues with relative URLs in CSS

1 Answers