html - Show background image that repeats on y axis? -

this relatively small project i've been working on it's driving me insane...

i'm trying port original website (which done in dreamweaver, html) visual studio 2013 asp.net project can add databases, login's etc. assignment have.

the main problem have fact css code not want tell in terms of layout.

i've tried remaking website entirely step step, making sure each aspect works correctly before moving on next.

this original website looks like: http://i.stack.imgur.com/sxfeg.png

(original html + css) https://gist.github.com/anonymous/7ed94218f9374d41918e

now, used template long time in order design , i've experimented see css code affects layout , found tag main_container (line 13 of html gist) controls white background of website.

so if remove tag, happen: http://i.stack.imgur.com/bfnle.png

^ important in problem.

when porting on website, copied across code correctly , adapted asp. (see gist: https://gist.github.com/anonymous/9c09befeb8950f4c1416)

however, in doing so, encountered problem css code main_container not being used correctly.

#main_container{     width:977px;     background:url(center_bg_repeat.gif) repeat-y center; 

the image not being repeated on y axis on original website , here's result: http://i.stack.imgur.com/e4tzu.png

• have got syntax wrong? or wrong code?
• i've placed images in same folder css file convenience.
• is problem visual studio 2013 or doing fundamentally wrong?
• is there perhaps way port same design without causing many problems?

i'm not entirely clear on want achieve if same layout original site, better replicate html , css first working @ restructuring or refactoring code. example, check element sizing same content displays expect.

there couple of key differences between original , new code affect behaviour in new version of site. in original css don't have repeat style center_bg_repeat.gif. also, looks #main_container isn't referenced in original code.

repeating background image won't cause content repeat across page. including content in new html need use positioning (e.g. floats vs relative/absolute positioning) tiles layout in way want (see code snippet example).

html, body, .container  {      height: 100%;       min-height: 100%;  }    .tile {      float: left;      width: 20%;      height: 30%;      margin: 10px;      padding: 20px;      background-color: #ccc;  }

<div class="container">    <div class="tile">first</div>    <div class="tile">third</div>    <div class="tile">second</div>    <div class="tile">fourth</div>    <div class="tile">last</div>  </div>

in case, if want #main_container scale fit content set style min-height: 100%;