Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Advanced: Overflow hidden with absolutely positioned child of static parent

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #209455
    Anonymous
    Inactive

    CONTEXT
    I am trying to achieve a parallax scrolling effect without causing jank, and am doing so by changing the transform property of the absolutely positioned div providing the background instead of using a property such as top.

    I have an html structure roughly as follows:

    <div>
      <div></div>
    </div>  
    

    with roughly the following css:

    .container {
      width: 100%;
      height: 300px;
      overflow: hidden;
      position: relative; //Important line - source of dilemma
    }
    
    .bg {
      top: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      position: absolute;
      background: center center no-repeat  url(image.jpg);
      background-size: cover;
    }
    

    THE PROBLEM

    In order for the background to be cropped to the parent (i.e. not overflow) I applied overflow: hidden; to the parent .container. Now, this does not work unless the parent is relatively positioned (position: relative;). When .container is relatively positioned, the image does not overflow.
    However, when the parent (.container) is relatively positioned, the child (.bg) has its positioning relative to the parent instead of the body, resulting in the child being offset from the top of the parent instead of the top of the body.

    This can all be seen illustrated in a pen.

    How can this be solved? I am open to adding one (or two?) divs extra to solve it, or editing some css. I’d rather not edit the javascript (e.g. subtracting the offset of the container from the translated value) if it’s possible.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.