CSS相对背景未在插入html代码时扩展

Question

Thanks for any help you can offer me/point me in the write direction.

I am not sure how to explain what is happening.

I current have a page with an image background (the image is 4044,2160 so it is larger than you would view on a single screen (normally)).

Currently when the page loads, the image is top-centered and is not on repeat and thus fills the background completely.

However when inserting html code (CRUD) via javascript, etc. with the resulting page becoming larger than the original in the y direction, the background stops and does not fill the space below.

http://postimg.org/image/jqzx0vuzr/

I am not sure what to do to fix it and most likely think it is a css problem.

Below is code: HTML

<section id="index" class="index clinic">
    <div id="x_container">
        Javascript insertion of code
    </div>
</section>

CSS

.clinic{
    width:100%;
    position:relative;
    background: url(../img/clinic.jpg) no-repeat top center;
}
.index{
    height: 100%;
    padding: 0;
}

#index.index {
    padding:15% 0 0 0;
}
#xcrud_container{
    width: 90%;
    margin: 0 auto;
}

It seems that the javascript does not matter as to what is inserted, (have tried lorem ipsum, etc.) But just to expand on what is inserted, the size of the x_container changes based on a state and this is altered by javascript. (Thus page is not reloaded and background size recalculated)

I have currently tried a clearfix solution (but to no avail) as well as attempting repeat-y on the background image.

Lastly I have attempted to manually create the page through directly saving the html code (ie it is not inserted by anything and is apart of the html code of the page) to the page and attempting to see if the background expands. It does not. The background fills the initial view area, however as soon as you scroll down the page, the white area reappears.

Just to make sure this is known the background image is larger than area viewed, thus the white area should not be present.

Any help would be greatly appreciated, as I have been at this for a few days...

Thanks

Answer 1

Change % to Pixels as for example.

.index{
    height:1000px;
    padding: 0;
}

Answer 2

Thanks for you help guys,

Through the comments and answer I have been able to figure out my own stupidity in trying to force a tag to define the background of the page rather than using body. ie .

The reason for my defining it as a section tag is due to its use on previous pages where the was followed by another section and thus the white space area would not be a problem. (Also is the reasoning for the height:100%;, as I had to define the height of the section as being 100% in order to fully create the image within the section.

Thanks again.