Background images not appearing
I have here my codes for html and css. I dont seem to catch the problem on why my images wont load or show-up. I tried them to load both on firefox and chrome.
My problem is not on jsfiddle.
And here is my folder structure:
- localhost/website/img
- localhost/website/css
- localhost/website
http://jsfiddle.net/p8eS3/1/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="description" />
<meta name="author" content="author" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<title>Title</title>
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="logo"></div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* Body */
#body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
background: #ccc;
}
/* Container */
#container {
width: 100%;
background: #000;
}
/* Sidebar */
#sidebar {
background: url(../img/开发者_StackOverflow社区sidebar.png) repeat-y;
width: 40%;
float: left;
position: fixed;
}
/* Logo */
#logo {
background-image: url(../img/logo.png);
}
You have two images, they're added as background images for divs, but those divs do not have layout since the sidebar lacks height and the logo height and width. Which means they do not show up at all. Give them height/width to fix it.
If not the paths to the images are wrong.
The images aren't loading as jsfiddle won't recognise ../img/sidebar.png as this will look locally on their server.
I'm assuming that this is not your initial problem though, and that you are experiencing problems getting the right path on your application.
I would recommend 'rooting' your image url so that it works from the root folder to the location like:
background: url(/img/sidebar.png) repeat-y;
Could be your folder structure. Are the images in a folder the same level as your html file, or a level up. If they're the same level, try replacing ../images with ./images
Your path to the images is most likely off. This will be hard to debug via a js fiddle. Can you post your directory structure?
It's because your divs don't actually take up any space, so you can't see any background. See your modified fiddle for an example of how to fix this.
Alternatively, you might want to consider using HTML img tags.
You have to specify a width and a height to your #logo element so that the BG can appear.
Try,
#sidebar {
background: url(../img/sidebar.png) repeat-y;
width: 40px; /* your background width */
height:60px; /* your background height */
float: left;
position: fixed;
}
/* Logo */
#logo {
background: url(../img/logo.png) 0 0 no-repeat;
width: 40px; /* your logo width */
height:60px; /* your logo height */
}
加载中,请稍侯......
精彩评论