Header image with CSS in Bootstrap theme always changes back to default - html

Question

I'm new to Bootstrap 3 (part of the problem), and I'm trying to set up a quick portfolio site for a class. I'm using the One Page Wonder starter template from here: http://startbootstrap.com/one-page-wonder. I've got a problem with the one-page-wonder.css stylesheet. I'm trying to change the header image from the placeholder, and I added a style for an essay, but neither change shows up when I drop it onto the server. I have deleted the entire bootstrap folder on my server and reuploaded it, but whenever I go to my page and check the code, it shows the same placeholder image and the same old style sheet. Here's the style I want to use:
.essay {
text-indent:50px;
}
.header-image {
background:url(/images/Fire.jpg) no-repeat center center cover;
background-position:top;
height:auto;
display:block;
width:100%;
text-align:center;
}
Here's a link to the page: http://jonathanalumbaugh.altervista.org/courserequests/photographyone.html
It's really annoying, I've looked through all the code, but it always reverts to this placehold.it thing. I've tried clearing out cookies, cached images, and files, but to no avail.

Answer 1

You're applying your CSS style incorrectly. You are passing an invalid value to background-image - that property expects only the URL to the image.
You are looking to set the background property, which is a shorthand property for multiple other properties. You can use it like this:
background: #000 url(/images/Fire.jpg) center center no-repeat;
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/background
You should always ensure your CSS is valid:
http://jigsaw.w3.org/css-validator/
Note: Your image still can't be found. Where is it?
You can't include cover in the background shorthand, you need to do something like this:
html {
background: url(/get/the/right/url.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}