I'm struggling to add a background image to my bootstrap site. I'm attempting to create a parallax site using stellar.js, and while the site is functional with text on each slide and correct scrolling links, the images just won't load. Despite searching through various resources like this site, YouTube, and others, I can't seem to get the darn image to display!
The background images are located in the following folder: img/slide1bg.jpg, which is just up one directory. I may be missing something, but I've tried combining the tutorial from this source with bootstrap. The code provided was effective for background images, but it doesn't seem to work well within bootstrap.
Here's 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>
And here's 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;
}