best way to put a responsive proportional stripe image down right side of page ?

Hi,

I'm trying to put a proportional coloured stripe down the right side of the page in all responsive views.

I tried

in style.less

body, html {

  height: 100%;

}





@stripeImagePath:           "/demo-2013/images";

#right-stripe {

	background: url("@{stripeImagePath}/assets/stripe-600x20.png&quot repeat scroll 0% 0% transparent;

	background-size: contain;

	width: 50%;

	position: absolute;

	right: 0px;

	height: 100% ;

	max-height: 100% ;

	z-index: -1;

}

in template manager injection panel "after "

but the stripe does not extend to the bottom of the page.

The computed height for the div is less than the height by about 2/3rds.

My div is the direct child of the , so I cannot see why it is not the same height as the body.

Is there some template javascript messing with this value - Joomla, Bootstrap or T3 ?

I'm just trying to reproduce in T3 what is shown here