I'm trying to set two different backgrounds for my body. I have the body divided into two sections with the div. I have the headArea and contentArea. I applied the bg to headArea but when I tried doing the same to contentArea, it didn't work. Nothing happened. Here's my HTML and CSS. Thanks in advance!
Also, how would i go about not having any spaces around my page. I want my
design to hug the whole screen.
http://i.imgur.com/bdwPd.png
------------------------------------------------------------------------
HTML
<!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" />
<title>Hwamok Park Website</title>
<link rel="stylesheet" type="text/css" href="newSite.css" />
</head>
<body>
<div id="bannerArea">
</div>
<div id="contentArea">
</div>
</body>
</html>
------------------------------------------------------
CSS:
@charset "UTF-8";
body{ background: #588F27;
}
html {
}
#bannerArea {width:100%; height:325px; margin:0px; padding:0px; /*float:left;*/ background: url(banner.gif) no-repeat;
background-position: center;
}
#contentArea {width:100%; margin-top:325px; padding:0px; background: url(bodybg.jpg) repeat-x;}
Also, how would i go about not having any spaces around my page. I want my
design to hug the whole screen.
http://i.imgur.com/bdwPd.png
------------------------------------------------------------------------
HTML
<!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" />
<title>Hwamok Park Website</title>
<link rel="stylesheet" type="text/css" href="newSite.css" />
</head>
<body>
<div id="bannerArea">
</div>
<div id="contentArea">
</div>
</body>
</html>
------------------------------------------------------
CSS:
@charset "UTF-8";
body{ background: #588F27;
}
html {
}
#bannerArea {width:100%; height:325px; margin:0px; padding:0px; /*float:left;*/ background: url(banner.gif) no-repeat;
background-position: center;
}
#contentArea {width:100%; margin-top:325px; padding:0px; background: url(bodybg.jpg) repeat-x;}