How do I get background to be controllable scrolling element

I am sure this is easy, and involves the z-index, but but but......

I would like to have an IMAGE with a transparent middle cut out, place that on a webpage and let the users scroll bar move the information contained therein up and down. I don't want scroll bars on the webpage - only that of the browser. I don't want the main image to move, just the content of the cut-out box (at users command).

What would the css look like? Thoughts?


LVL 10
Nancy McCulloughAsked:
Who is Participating?
 
remorinaCommented:
Unfortunately I don't think any software might be able to achieve what you need if you don't actually know how to implement it, the problem with HTML and CSS is that software makes it easier to generate code, maybe slice although in most cases unreliably however it won't invent CSS tricks or implement a non standard idea on its own without you working on it.

In my example above the text does scroll free of the background, if you simply remove the two blue layers, which can be inagesinstead of a solid color, you will see that the text is normally scrolling in the whole page freely but adjusted with margins and padding so that the scroll doesn't end without showing all the text in the designated space.

I believe you have a certain image in your mind that you need to see hapenning but to use the browser's scroll bar to control a certain element on the page and not the whole page is an odd approach and it would result in excessive CSS & most probably JavaScript as well to handle correctly.

As I've mentioned earlier, this approach will be resolution/window size restricted, for example what if the user's resolution is 1920 x 1080, the screen might be big enough to contain the content thus the browser won't render a scroll bar in the first place and your overlay image would be too small to fill the browser window, same thing if the browser window is resized, the scroll and proportions would change, so I believe you might end up with more troubles to fix than you expect, not to mention testing in 5+ browsers and it probably won't be mobile or iPad friendly.

Having a valid markup with a scroll bar to the div would be your best and easiest approach, it is  what a user would expect when seeing such a layout and you'd give a simpler user experience as well.

What I would finally suggest, you might customize the scroll bars to give a better feeling and effect to your scrollable container if you like, there are plenty of solutions to fully customize using JS or changing the scrollbar colors using CSS only.

Below are two examples of customizing the scrollbars if you find it useful.
http://www.hesido.com/web.php?page=customscrollbar  A fully custom JS solution

http://www.webdevelopersnotes.com/tips/html/colored_custom_scrollbar_tutorial.php3 A tutorial using CSS to customize scrollbar colors, can also be applied to containers instead of the whole browser.

Finally, I'm not saying that what you want to implement is impossible as I don't believe in the word, actually through my years of work I had several challenges that many thought might not be possible but with some thinking out of the box they can be achieved, the real question is whether it's worth all the trouble and extra days of troubleshooting and incompatibility or not.

I hope this helps and wish you the  best of luck.
0
 
Jagadishwor DulalBraces MediaCommented:
You can fixed your background attachment:

body {
 background: url("imgelocation") no-repeat;
 background-attachment: fixed;
 }

Open in new window

0
 
Nancy McCulloughAuthor Commented:
That's part of it. How do I get the inside of the box to scroll with the main scroll bar (not inside box)?
The box is part of the main fixed attachment. The inside of the box is not.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
remorinaCommented:
Cityqat,
Although you can fix a background image from scrolling with content you however can not use the browser's scroll bars unless the page contents extend beyond the page bottom edge.

So in order to be able to position some content in the middle of the page within a fixed box, you would have to use a container's scroll bar in order to scroll the content within that box and not using the browser's scroll bars since the browser's bars will only render once the content exceeds the page length.

If your content if fixed within that box, there shouldn't be a browser's scroll bars in frist place.

I'm afriad what you're trying to achieve might not be possible but I've attached a simple example below that implements a similar idea where the scroll bar is implemented on the div, hope this helps

Cheers!



 scrollable-content.zip
0
 
Nancy McCulloughAuthor Commented:
Huh. We're getting closer. I got the idea from looking at this page: http://www.extractable.com/case-studies/care-credit.aspx that perhaps if the browser controlled scrollable area only controlled the top layer (as it currently does) and the background made it so that the text did not scroll right off the page endings, it could look like there is text that is scrollable in a box using the browser only.

It's hard to believe that this would not be possible?
0
 
remorinaCommented:
The link you provided is simply using only a fixed background image without any further CSS tricks.

The only way I can think of what you're trying to achieve happening is by using overlaying layers and z-index to create two layers at the top and the bottom of your page to act as virtual edges instead of the actual page edges, then working out your positioning and padding of the element to get the page scroll and content to scroll all the way up to the end.

I've attached an example of how this can be achieved however, you would need a lot more work in the CSS to get what you are trying to achieve, also this works with fixed pixels where results will vary in different window and screen sizes, and in order to get the overlays concurrent with the content div, you might have to use some Javascript to get the actual window height then use it in an inline style to get the (50% minus the div's height divided by two).

Hope this makes sense, but what you're trying to do is not simple.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Letter K</title>
    <style type="text/css">
        html, body {width:100%;height:100%;margin:0;background:#0082d7;}
        .mainDiv {
            width:100%; 
            height:100%;
        }
        .scrollDiv {
            background:#fff;width:310px;position:absolute;top:50%;left:50%;margin-top:-120px;margin-left:-150px;padding:5px 5px 300px;z-index:10;
        }
        .lowerOverlay {position:fixed;bottom:0;height:300px;background:#0082D7;width:100%;z-index:100;}
        .upperOverlay {position:fixed;top:0;height:300px;background:#0082D7;width:100%;z-index:100;}
    </style>
</head>
<body>
    <div class="mainDiv">
        <div class="upperOverlay">&nbsp;</div>
        <div class="scrollDiv">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            <br />
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
            <br /><br />
            <b>End of Page</b>
        </div>
        <div class="lowerOverlay">&nbsp;</div>
    </div>
</body>
</html>

Open in new window

0
 
Nancy McCulloughAuthor Commented:
This was close as well, and I understand the answer to be more complete (z index), but the sample html simply gave a blue scree with a white box with text - both fixed so that the text doesn't scroll free of the background....

My brain is melting by being soooo close to what I want... Do you know of a good software that could handle this with ease while being user friendly and affordable? I hate being so close to what I'm aiming for and unable to reach it....

0
 
IanThCommented:
in the css the class of scrolldiv must has a scrollbar to scroll
0
 
Nancy McCulloughAuthor Commented:
Is it possible to do it without scrolldiv? Is it possible to put the image on top and text behind where main scrollbar controls the back layer?
0
 
Nancy McCulloughAuthor Commented:
I will keep working on it as I *know* this is not impossible. I am so far out of the box, I might lose my box altogether! haha Maybe I will just stay near the box and wait for technology to catch up a bit (odd thing to say considering how fast tech evolves)

Many thanks for all of your help!
0
 
Nancy McCulloughAuthor Commented:
Thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.