I want to create a website, inspired by / .
The images shall stay at the same position on the Screen (position:fixed), but inside the next div, the second image shall be visible.

My first solution was to use background-images, which worked.

With background-images, it looked like this JSFIDDLE: / (i do not own these images)
Consider the following code:

<div class="background" style='background-image:url(".jpg");'></div><div class="background" style='background-image:url(".jpg");'></div>

But I also want to move the images via JS later on! You cant manipulate backgroundimages top-offset easily, so I decided to use an img-tag instead.

Now, using the img-tag, the images seem to be independent of their divs, and overlap each other so that always only one image is visible.

( id like to include my current code but stackoverflow wont let me do. four spaces dont do anything, i cant format my code. )

So my question is:


How can I make images be only visible inside a certain div, but keep their positions fixed?

I want to create a website, inspired by http://cirkateater.no/en/ .
The images shall stay at the same position on the Screen (position:fixed), but inside the next div, the second image shall be visible.

My first solution was to use background-images, which worked.

With background-images, it looked like this JSFIDDLE: http://jsfiddle/Ryanous/r7mLm4wg/4/ (i do not own these images)
Consider the following code:

<div class="background" style='background-image:url("http://mintywhite./wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg");'></div><div class="background" style='background-image:url("http://vpnhotlist./wp-content/uploads/2014/03/image.jpg");'></div>

But I also want to move the images via JS later on! You cant manipulate backgroundimages top-offset easily, so I decided to use an img-tag instead.

Now, using the img-tag, the images seem to be independent of their divs, and overlap each other so that always only one image is visible.

( id like to include my current code but stackoverflow wont let me do. four spaces dont do anything, i cant format my code. )

So my question is:


How can I make images be only visible inside a certain div, but keep their positions fixed?

• javascript
• html
• css
• image

• Could you please make a jsfiddle of your current code? I'm going to try a few things. – Ian Hazzard Commented Oct 15, 2014 at 12:24
• Have you tried Overflow for Div? w3schools./cssref/pr_pos_overflow.asp – Albi Commented Oct 15, 2014 at 12:27
• jsfiddle of current code: jsfiddle/Ryanous/ddrwkstr/1 – Johannes Commented Oct 15, 2014 at 12:44

1 Answer 1

Putting the style overflow:hidden; on the div would hide all that's outside of the div.