Question

I have created this site and am trying to implement fixed text on the first slide (the one with the Nike basketball). Currently, I have the text ‘The first of its kind’ as part of the background image. Is it possible to separate it from the background and place the text in its own div?

I am stumped for ideas as the first slide is created by using three separate div – one for the top portion of the ball, the second for the bottom portion of the ball, and the third as the magnification of the ball. I thought of attaching the text within the first and second div, but it causes the text to scroll with the page as oppose to fixing it in place.

Site link: http://www.sfu.ca/~jca41/stuph/parallaxTest/parallax03/parallax03.html

Answer 1

Yes, use position:fixed with left and top css attributes.

e.g.

#fixedText {
  position:fixed;
  left:100px;
  top:50px;
}

EDIT:

To accommodate the overlapping of slides, you would have to apply a z-index to the slides and the text.

For instance you could give the page class a z-index of 2 (and position:relative or the z-index doesn’t take effect), the #fixedText rule a z-index of 1, and the #first rule a z-index of 0. This would create the layering you are after:

  #fixedText {
    position: fixed;
    left: 75px;
    top: 120px;
    font-size: 35pt;
    color: white;
    z-index: 1;
    font-family: helvetica;
  }

  #first {
    background: url(images/01.jpg) no-repeat fixed;
    height: 1000px;
    z-index: 0;
  }

  .page {
    margin: 0;
    padding: 0;
    overflow: auto;
    width: 100%;
    z-index: 1;
    position: relative;
  }