CSS no background image, any ideas? - html

Question

I'm trying to get my background image to show at the top center of the page. The image works fine if I do:
<style>
body {
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed;
}
</style>
I can't seem to work out where I've gone wrong. There must be something I've managed to mess up, I just can't see it. Here is the CSS:
body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('img/top_logo_blank_small.png') no-repeat fixed;
color: #fff;
margin: 0;
padding: 0;
}
a {
color: black;
text-decoration: none;
}
/* Typography */
.header h1 {
position: absolute;
width:100%;
top: 50%;
margin-top: -20px;
text-align: center;
letter-spacing: 4px;
}
.header h1 em {
font-size: 1.200em;
font-style: normal;
}
h1 {
font-size: 2.2em;
color: #fff;
}
.content h2 {
font-size: 1.75em;
color: #fff;
letter-spacing: 4px;
text-align: center;
}
.content h2 em {
font-size: 1.2em;
font-style: normal;
}
.content h3 {
text-align: center;
font-size: 1.0em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
margin-bottom: 25px;
}
.content h4 {
margin-top: 0;
text-align: center;
font-size: 0.8em;
font-weight: normal;
color: #ede0ed;
letter-spacing: 1px;
}
#banner p {
text-align: center;
}
/* Navigation */
#nav {
margin: 4px 4px 40px;
}
#nav ul {
padding: 0;
margin: auto;
list-style: none;
}
#nav ul li {
width: 50%;
color: #BBB;
float: left;
font-family: 'Cabin Sketch';
font-size: 1.75em;
text-align: center;
background: url(img/scribble_dark.png);
}
#nav ul li a {
display: block;
/*padding: 5px 20px;*/
}
#nav ul li a:hover {
background: #e0d0e0;
}
/* Content */
.container{
max-width: 720px;
margin: 50px auto 0;
background: #FFF url('img/top_logo_blank_small.png') no-repeat fixed 0 0;
}
.header {
position: relative;
background-color: #b88fb8;
border-top: 5px solid #ede0ed;
height: 75px;
}
.content {
background-color: #000;
padding: 15px;
margin-bottom: 10px;
}
div#about {
padding:25px;
min-height: 255px;
}
img#portrait {
float: left;
margin-right: 25px;
width: 256px;
height: 256px;
}
div#footer {
width: 100%;
max-width: 720px;
margin: auto;
color: black;
text-align: right;
padding: 0 10px;
font-size: 0.850em;
}
#media screen and (max-width: 650px) {
.container {
width: 90%;
max-width: none;
}
div#footer {
width: 90%;
}
}

Answer 1

Try to change your path for example:
background: #EEE url('../img/top_logo_blank_small.png') no-repeat fixed top;
Because you are in a subfolder, you have to go up of a level I think

Answer 2

Most likely your css file is in a different folder and therefore needs another path to the image file.
The common way is to put css in a separate css/* folder, so the path should be:
url('../img/top_logo_blank_small.png')

Answer 3

This CSS seems to work fine, are you certain that the image exists?
http://jsfiddle.net/ghsNR/
I've just tried it here and it works fine with an image from http://placehold.it/
body {
font-family: 'Quattrocento Sans', helvetica, sans-serif;
background: #EEE url('http://placehold.it/500x500') no-repeat fixed top;
color: white;
margin: 0px;
padding: 0px;
}
The most likely cause after observing this is that your CSS isn't actually locating your image correctly. I suggest using tools like the Chrome dev tools, or Firebug to inspect the absolute path that the browser is trying to use to load the image and moving forward from there.

Answer 4

Is the css in the same folder as the page? If you have a different folders, you need to change the URL accordingly.
Maybe change the URL to
'../img/top_logo_blank_small.png'