(ASP/CSS/HTML) - Show background image that repeats on y axis?

(Information from the link) This is a relatively small project that I've been working on however it's driving me insane...

I'm trying to port my original website (which was done completely in Dreamweaver, HTML) to a Visual Studio 2013 ASP.NET project where I can add databases, login's etc. for an assignment I have.

The main problem I have is the fact that my CSS code does not want to do what I tell it to do in terms of the layout.

I've tried completely remaking the website entirely step by step, making sure each aspect works correctly before moving on to the next.

This is what my original website looks like: http://i.stack.imgur.com/sxfeg.png

(Original HTML + CSS) https://gist.github.com/anonymous/7ed94218f9374d41918e

Now, I used a template a long time back in order to get this design and I've experimented to see which CSS code affects the layout and found that the tag main_container (line 13 of the HTML gist) controls the white background of the website.

So if I remove the tag, this will happen: http://i.stack.imgur.com/BFNLE.png

^ This is important in my problem.

When porting over my website, I copied across all the code correctly and adapted it to ASP. (See Gist: https://gist.github.com/anonymous/9c09befeb8950f4c1416)

However, in doing so, I encountered a problem where the CSS code for the main_container was not being used correctly.

main_container{

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

The image was not being repeated on the y axis like on the original website and here's the result: http://i.stack.imgur.com/E4TZU.png

Have I got the syntax wrong? Or what is wrong with my code? I've placed all the images in the same folder as the CSS file for convenience. Is this a problem with Visual Studio 2013 or am I doing something fundamentally wrong? Is there perhaps another way to port this same design without causing so many problems?

/r/learnprogramming Thread