fixed background image

I have a website project where i want evry other boxes to be fixed except the content box? How can this be made? I've tried to put background-attachment: fixed; to all div boxes except the content one, but it seems that it doesnt work. Any suggestions? Here's my code now, without those background-attachment properties:


<body> <!-- Begin Wrapper -->
 <div id="wrapper">
 
   <!-- Begin Header -->
   <div id="header">
 
  
 
 </div>
 <!-- End Header -->
 <!-- Begin Left Link Navigation -->
 <div id="leftlinknavi">
 
  
 
 </div>
 <!-- End Left Link Navigation -->
 <div id="linknavi">
 
  <a href="index.html" class="navi_link">Etusivu</a> / 
 
 </div>
 <!-- End Link Navigation -->
 
 <!-- Begin Right Link Navigation -->
 <div id="rightlinknavi">
 
  
 
 </div>
 <!-- End Left Link Navigation -->
 
 <!-- Begin Left Column Header -->
 <div id="leftcolumnheader">
 
  
 
 </div>
 <!-- End Left Column Header -->
 
 <!-- Begin Navigation -->
<div id="drop_down_menu">
</div>
 
 <!-- Begin Left Column Header -->
 <div id="rightcolumnheader">
 
  
 
 </div>
 <!-- End Left Column Header-->
 
 <!-- Begin Left Column -->
 <div id="leftcolumn">
 
 
 </div>
 <!-- End Left Column -->
 <!-- Begin Content Column -->
 <div id="content">
 
 
   
 </div>
 <!-- End Content Column -->
 
 <!-- Begin Right Column -->
 <div id="rightcolumn">
 
 
  <ul class="links">
 
 </ul>
 
 
 <div class="clear"></div>
 
 </div>
 <!-- End Right Column -->
 
 
 
 </div>
 <!-- End Wrapper -->
 
</body>
</html>


* { padding: 0; margin: 0; }body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 854px;
}
#header {
 color: #333;
 width: 852px;
 float: left;
 border-width: 1px 1px 0px;
 border-style:solid;
 border-color:#000;
 height: 120px;
 margin: 10px 0 0 0;
 background: #E7DBD5 url(header.jpg) no-repeat top;
}
#drop_down_menu{
height:30px; 
width: 558px;
position:relative; 
z-index:100; 
float:left;
border: 1px solid #ccc;
 margin: 0;
 background: #fff;
}
#linknavi {
float: left;
 width: 558px;
 color: #333;
height: 22px; 
border: 1px solid #ccc;
 margin: 0;
 
}
#content { 
 float: left;
 color: #333;
 background: #E7DBD5;
 margin: 0;
 width: 560px;
 height: auto;
 display: inline;
}
#leftlinknavi { 
 color: #333;
 border-width: 0px 0px 0px 1px;
 border-style: solid;
 border-color: #000;
 background: #E7DBD5 url(lln.jpg) no-repeat top;
 margin: 0;
 width: 146px;
 height: 24px; 
 float: left;
}
#rightlinknavi { 
 color: #333;
 border-width: 0px 1px 0px 0px;
 border-style: solid;
 border-color: #000;
 background: #E7DBD5 url(rln.jpg) no-repeat top;
 margin: 0;
 width: 146px;
 height: 24px; 
 float: left;
}
#leftcolumnheader { 
 color: #333;
 border-width: 0px 0px 0px 1px;
 border-style: solid;
 border-color: #000;
 background: #E7DBD5 url(lch.jpg) no-repeat top;
 margin: 0;
 width: 146px;
 height: 32px; 
 float: left;
}
#rightcolumnheader { 
 color: #333;
 border-width: 0px 1px 0px 0px;
 border-style: solid;
 border-color: #000;
 background: #E7DBD5 url(rch.jpg) no-repeat top;
 margin: 0;
 margin: 0;
 width: 146px;
 height: 32px; 
 float: left;
 position: relative;
}
#leftcolumn { 
 color: #333;
 border-width: 0px 0px 0px 1px;
 border-style: solid;
 border-color: #000;
 background: #50ff65 url(leftcolumn.jpg) no-repeat top;
 margin: 0;
 width: 146px;
 height: auto;
 float: left;
}
#rightcolumn { 
 color: #333;
 border-width: 0px 1px 0px 0px;
 border-style: solid;
 border-color: #000;
 background: #50ff65 url(rightcolumn.jpg) no-repeat top;
 margin: 0 -2px 0 0;
 width: 146px;
 height: auto;
 float: left;
 position: relative;
}

fixed background image

how to make a layout where only the content scrolls

eight8ball

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week