CSS Load Image Not Working

vipercode · 01-07-2013, 06:51 AM

I have problem my top images not load for some reason other one has. Any ideas the top menu bar showing but rest not

CSS Code Layout
html,body {
background: #e7e7e7;
font-family: Arial, Helvetica, sans-serif;
color: #202020;
padding: 0px;
margin: 0px;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0px auto -60px;
}
#top-menu {
height: 57px;
width: 100%;
background-image: url(../images/top-menu-bg.jpg);
}
#top-row {
background-image: url(../images/top-bg.png) top left repeat-x;
width:100%;
}
#top-bg {
background-image: url(../images/top-row-bg.png) top center no-repeat;
width:100%;
}

HTML Code Layout

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Website Home</title>
<link rel="stylesheet" href="css/template.css" type="text/css">
</head>
<body>

<div id="wrapper">

<div id="top-menu">

</div>

<div id="top-row">
<div id="top-bg">
</div>
</div>

</div>
</body>
</html>

tracknut · 01-07-2013, 03:42 PM

If you're talking about top-row and top-bg, they have no size, and no content to create a size, so there's nothing to display. You'd need to add a height to them, or put in some content, to see the background image start appearing.

Dave

L0adOpt1c · 01-09-2013, 03:11 PM

Have you tried possibly loading your images in the HTML instead of the CSS? That would make it easier to edit positions. That way you can have a ballpark position before you start slinging CSS properties.