CSS- Background img not showing up in container [Archive]

bladeru12

06-24-2008, 07:13 AM

Hello, I am new to css but not to webpages. I used to design pages using tables and now I want to learn and design using css. But I'm having trouble and I figure its a quick fix. Note this website is not on line I am doing my test use IE 7 and Firefox ver 2 PC Ver.

Q: I'm trying to design a website for a client and I am have trouble try to get my background img to show up in my #container. Here is sample of my basic layout. Hope some could help me.

@charset "utf-8";

body {
background-color: #271a0b;
background-image: url(../images/bgStrip.gif);
background-repeat: repeat-x;
}

#container {
width: 100%;
height: 900px;
overflow: hidden;
background-image: url(/images/backGround.jpg);
background-repeat: no-repeat;
background-position: 0;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="asset/screen.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">Content for id "container" Goes Here</div>

</body>
</html>

body background is working. Note: Got the codes samples from CSS Cookbook, good book learning allot but can't seem to get it to work. Hope some could help me.

allahverdi

06-24-2008, 07:20 AM

If images folder is in one place then your mistake is in red highlighted place:

body {
background-color: #271a0b;
background-image: url(../images/bgStrip.gif);
background-repeat: repeat-x;
}

#container {
width: 100%;
height: 900px;
overflow: hidden;
background-image: url(/images/backGround.jpg);
background-repeat: no-repeat;
background-position: 0;
}

Change that row to this:

background-image: url(../images/backGround.jpg);