trouble with background img in bootstrap 3.1.1 with parallax

Question

I am having major trouble adding a background image to my bootstrap site. I am trying to create a parallax site using stellar.js so far the site works ok, I have some text on each slide, the links scroll to the correct slides etc etc...but the images wont seem to load up. I have looked through this site, youtube and many others but I just cant seem to get the bastard image to display lol

I got my background images in the following folder. img/slide1bg.jpg so its only up one dir. Maybe I am missing something, but I have attempted to combind the tutoiral from here: with bootstrap...the following code worked fine for background images, but within bootstrap it doesnt seem to like it.

my HTML:

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="slidetext">
            //text here
        </div>
    </div>
</div>

my CSS:

html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.slide{
position: relative;
background-attachment: fixed;
width: 100%;
height: 100%;
}

#slide1{
color: pink;
background: url('./img/slide1bg.jpg') no-repeat;
background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}
.slidetext{
padding-top: 70px;
}

Answer 1

Have you tried to add a dot (.) at the begin of the URL?

This is what you have typed:

background: url('./img/slide1bg.jpg') no-repeat;

try this

background-image: url('../img/slide1bg.jpg') no-repeat;