html - GitHub pages - issues with relative URLs in CSS -

i trying set github pages site using jekyll. approach upload contents of _site root of repo , reference assets via relative url.

below snippets of relevant code 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 loading correct url structure. follows:

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

my css urls not loading correctly...they like:

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

and on, generating 404s.

edit: have gulptask helps run jekyll - looks 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 code: '+code);     }); }); 

i tried few things didn't remedy solution:

1. changing relative paths ../
2. removing forward slash looks like: background-image:url('/img/icon.png');
3. moving img folder root directory of project

is there step missing? have suggestions on how better?

considering have urls myusername.github.io/repository-name/.., need fix relative paths using absolute_url , 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 can adjust them "manually" using url /repository-name/css/... or use absolute_url again making jekyll process file adding 3 - @ beginning this, in css file:

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