0

is there a way to build something like this:

http://jsfiddle.net/cuginoCoso/k5zk5m9q/10

without having a div to cover the area on top of the div?

Here you see how it looks without the covering div: http://jsfiddle.net/cuginoCoso/k5zk5m9q/9/

I would like to be able to position the div anywhere without masking it. Usually you would use position:fixed; on the div i think, but then you're not able to scroll the images.
Thanks

hannes
  • 41
  • 7
  • You can wrap it in a div with `overflow-y: scroll` and a defined width and height, and then place in divs with the same height and width. Then just use the background and background-attachment. – somethinghere Oct 29 '14 at 10:55

1 Answers1

1

Heres what I tested and it works, and it's quite easy. Using the overflow-y: scroll will replace your box on top of the div, wrapping your scrolling into one little box.

HTML

<div class="wrapper">
    <div style="background-image: url(1.png)"></div>
    <div style="background-image: url(2.png)"></div>
    <div style="background-image: url(3.png")></div>
</div>

CSS

.wrapper {
    position: absolute;
    overflow: scroll;
    width: 200px;
    height: 200px;
}
.wrapper div {
    width: 200px;
    height: 200px;
    background-attachment: fixed;
    background-position: 50% 50%;
    background-size: cover;
}
somethinghere
  • 16,311
  • 2
  • 28
  • 42
  • Thanks, but it does not keep the images fixed and its only scrollable if the mouse is inside the div. I need it like this: http://jsfiddle.net/cuginoCoso/k5zk5m9q/10/ – hannes Oct 29 '14 at 15:29
  • It should keep the images fixed. If you want it to work on the whole page, this is the wrong way and an overlapping element is the only way indeed. – somethinghere Oct 29 '14 at 15:34
  • So there is no other solution then having a div covering the top part of this image? – hannes Oct 30 '14 at 02:14
  • The solution i gave you allows you to declare any size box. An overflow box is made to hide contents from view, just check it out and work with that. – somethinghere Oct 30 '14 at 08:26
  • I implemented your solution in the jsfiddle: http://jsfiddle.net/cuginoCoso/k5zk5m9q/11/ I see that you can position the div anywhere on the page. But beside the problem that you can only scroll inside the div, do you see how the background-attachment:fixed is behaving differently? – hannes Oct 30 '14 at 11:16
  • Im thinking if you want to implement this type of thing it might be best to look at s droll-hijacking library as it could combine my solution with page scrolling. Also, the reason the attachment 'behaves differently' is because its attached to my inner divs. In this case, you can't have your cake and eat it too :) – somethinghere Oct 30 '14 at 12:53