navyhouses navyhouses - 1 year ago 57
CSS Question

How do I have a image stay fixed on the page but have a text overlaid move?

So I'm trying to figure out how I'd go about coding something similar to this website: and how to have the text scroll down for a certain length, but not have the picture to move.

Answer Source

If you are trying to keep a floating block of text or image above the images moving underneath, you can use css "position:fixed;".

      position: fixed;
      top: 25%;
      right: 25%;
      width: 50%;
      border: 3px solid red;


Or the opposite... (because your wording is a bit confusing) If you are trying to have fixed position image which does not move while the rest of the page scrolls, try this example:

    .fixedBackground {
      width: 100%;
      position: fixed;
      top: 0;

Edits Edits **EDITS Per your new comments **

Per your comments, here are some additional ideas to get closer to what you described:

1. Pure CSS: Set the "z-index"s so that certain elements stay on top of others. (highest z-index stays on top. You must set the "position" to something to use "z-index")


.fullwidthblock {   /* this is the first background */
.floating-block{  /* this is the floating block */
  position: fixed;
.stayOnTop{     /* this is for all blocks further down the page that should always stay on top*/

?Do you have jquery on your site?

2. Custom Javascript or Jquery: Keep the element Fixed, until you scroll to a certain point, and then make it scroll up with you. There's an answer here: (but it seems to be using an older version of jquery) Stopping fixed position scrolling at a certain point?

3. A full Jquery plugin:

Sticky Kit --Seems okay

ScrolTo Fixed --This looks like your best bet, so I updated the jsfiddle to show you this option:

<!-- grab jquery  -->
<script type="text/javascript" src="//"></script>
<!-- grab plugin script -->
<script type="text/javascript" src=""></script>

<!-- trigger the plugin -->
<script type='text/javascript'>
  marginTop: 80,  //how far from the top of the window to start
//  limit: $($('.stayOnTop')).offset().top
  limit: 550   //when to make the fixed element start scrolling up

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download