Question

I am looking to make a “10 foot” useable site for TV. Ideally it would have a full screen background image a small header where the nav will be placed and under it a container for the content. I would like for the container itself to have a scroll bar, as oppose to the browser having the scroll bar, since this would lose my top header.

Basically top header should be fixed, an image for a background, and a container that scrolls inside itself. I have tried finding templates or a starting point online for this with very poor results. The best i have found so far is http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

This is almost what I need except the container overflows the screen so the scroll bar is in the browser. Also this article was written in 2010, maybe there is a better way to achieve this now?

Answer 1

You can use CSS to style the div.

div.scroll {
   background-color:#00FFFF;
   width:100px;
   height:100px;
   overflow-y:scroll;
}

Then… all you have to do is position that div as you want.