We moved to new unified forum!

Please post all new support queries in our New Forum.

T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. Fred Cass
  2. General Discussion
  3. Thursday, 21 November 2013
  4.  Subscribe via email

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") 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 <body>"

<div id="right-stripe"></div>

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

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

My div is the direct child of the <body>, 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
There are no comments made yet.
Accepted Answer Pending Moderation
fixed it. Usual impenetrable CSS kruft.


position: absolute;


position: fixed;

and it works.
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
  • Page :
  • 1

There are no replies made for this post yet.
However, you are not allowed to reply to this post.