Hi. Trying to figure this one out. I have the css
#centerBar2 {
position:absolute;
left: 150px;
top:100px;
width:700px;
height:500px;
background-image:url(images/CenterBackground.jpg);
}
And in the HTML I have
<div id="centerBar2"> </div>
For some reason the image is not displaying in this div, is there any reason for this? Am I missing something?
cheers
Is your div showing up at all? You need to make sure that it is showing up first. You may have an error in your code where you do not have the same amount of opening div tags as you do closing div tags, thus it won’t actually display your centerBar2 div.
Are you sure your image is in the right directory, properly named, etc.?
your code works fine when I put my own jpg bg image in the css.
Are you sure the image “images/CenterBackground.jpg” exists?
The most likely thing is that you have not entered the correct filepath for the image.
If the CSS file is in folder/ then the image needs to be in folder/images/ - is that what you’ve got? If the images folder is at the same level as the folder your CSS file is in then you need to have …/images/ to get the right filepath.
Thats what confusing, everything appears to be fine. This is my html body
<body>
<div id="container2">
<div id="header2"> <img src="images/HeaderImage.jpg" /> </div>
<div id="leftBar2">
<ul>
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="centerBar2"> </div>
<div id="rightBar2"> </div>
<div id="footer2"> <img src="images/FooterImage.jpg"/> </div>
</div>
</body>
And the css is as I show above. The images are in the exact same location as the images I use in the header and footer, but these work fine. If I use the path I am using in the css, but use it in the centerBar2 div using the img tag, it displays fine. I cant see what else could be wrong with this.
if your css is in an external stylesheet, then the path to the bg images in the css should be relative to the folder your stylesheet is in.
The link is relative. Thats what makes this wierd. The exact url works in the div if I use an img element. I am going to try a few things and see if I can figure this out.
ok but
is your css in an external stylesheet or embedded in the <head> of your html file in <style> tags?
if your css is in an external stylesheet, is the stylesheet in the same folder as your html files?
If not, where is the folder your stylesheet is in relative to the folder your html file is in?
You genius!! I was just testing and tried using internal css, and it worked fine. Now just tried as you suggested making the path in my external css relative to the css file location, which meant stepping back one folder. Done this and worked great.
Cheers guys
glad it’s sorted out 
I remember it took me a while to work out what was going on when I first made the same mistake.
Now it’s one of those things tattood on my forehead 
I actually just realised now that I have one more issue. This image is being added to a div. My page is a liquid layout. Therefore, I somehow need the background images width to be 100%. I cant however see this option available. Can I set the width of the background image? (I dont want to repeat the image as the image is basically a border for my div)
No you can’t set the width of the background image. What you could do though is to create an extra class for the image and add the image in your html something like:
#centerBar2 {
position:absolute;
left: 150px;
top:100px;
width:700px;
height:500px;
overflow: hidden;
}
#centerBar2 .bg {
position:absolute;
top: 0;
left: 0;
min-width: 700px;
min-height: 500px;
width:100%;
height:100%;
}
<div id="container2">
<div id="header2"> <img src="images/HeaderImage.jpg" /> </div>
<div id="leftBar2">
<ul>
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="centerBar2">
<img class="bg" src="images/CenterBackground.jpg" />
</div>
<div id="rightBar2"> </div>
<div id="footer2"> <img src="images/FooterImage.jpg"/> </div>
</div>
Problem is, wouldnt that be just like a normal image though, meaning nothing can be placed ontop of it (like text). I do see that CSS3 has introduced background-size: but it doesnt look like it is supported in many browsers.
You could give it z-index 0
#centerBar2 {
position:absolute;
left: 150px;
top:100px;
width:700px;
height:500px;
overflow: hidden;
}
#centerBar2 .bg {
position:absolute;
top: 0;
left: 0;
min-width: 700px;
min-height: 500px;
width:100%;
height:100%;
z-index: 0
}
#middlebar {
width: 660px;
margin: 120px 0 0 170px;
position: relative;
z-index: 1;
}
<div id="container2">
<div id="header2"> <img src="images/HeaderImage.jpg" /> </div>
<div id="leftBar2">
<ul>
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
<div id="centerBar2">
<img class="bg" src="images/CenterBackground.jpg" />
</div>
<div id="middlebar">
<p>Nullam sapien ipsum, ullamcorper ut consequat vel, fringilla a purus. Donec malesuada bibendum bibendum. Quisque eget consectetur diam. Mauris tincidunt pretium bibendum. Cras tincidunt adipiscing lacus, quis sodales purus dapibus vel. Phasellus ut imperdiet justo. Cras sollicitudin, magna et placerat venenatis, dolor mauris facilisis nisi, vitae pellentesque diam felis adipiscing metus. Mauris ullamcorper magna nec arcu sagittis imperdiet. Curabitur vel mauris mauris. Nulla arcu justo, dignissim non vestibulum et, pellentesque nec massa. Nunc euismod, mi vel egestas scelerisque, felis lorem imperdiet mi, eu condimentum purus turpis ut tellus. Ut vel tristique ante. Etiam elit eros, faucibus in dictum ac, venenatis nec metus. Vestibulum in quam ut nulla viverra cursus. Donec eu augue vitae elit sagittis varius. Duis tellus nulla, convallis nec pulvinar vel, pretium eget mauris. Praesent vel risus tellus, vel mollis magna. Fusce tristique est sit amet lectus lacinia at consectetur enim accumsan.</p>
</div>
<div id="rightBar2"> </div>
<div id="footer2"> <img src="images/FooterImage.jpg"/> </div>
</div>