J.ade J.ade - 3 months ago 13
CSS Question

How to make a background with a div on top both behave like a parallax background

I have a fixed background for a parallax effect and on top of it there is a div with a section title. Following this I have the main content div. I could obviously include the content of the div in the image and just use the new image as the background but I would like to keep control over the size, font, etc of the div content thus the need to have both behave like a background. Is this effect possible achieve?

Here's an example code: what i want to get is for the title div to be fixed and behave like the parallax background.



.parallax{
background-image: url('http://i.stack.imgur.com/jGlzr.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.title{
position: relative;
display:flex;
height: 120px;
width: 120px;
border: 3px solid white;
left: calc(50% - 60px);
align-items: center;
justify-content: center;
}
.content{
background-color: red;
height:800px;
}

<div class="parallax">
<div class="title">
<h3>
A title
</h3>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>




Answer

That should be pretty straightforward. All you need to do is set your title div to position: fixed and your content div to position: relative and give it a top offset of the title div's height + border (126px).

Like so:

.parallax{
  background-image: url('http://i.stack.imgur.com/jGlzr.png');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.title{
  position: fixed;
  display:flex;
  height: 120px;
  width: 120px;
  border: 3px solid white;
  left: calc(50% - 60px);
  align-items: center;
  justify-content: center;
}
.content{
  height:800px;
  position: relative;
  top: 126px;
}
<div class="parallax">
  <div class="title">
    <h3>
      A title
    </h3>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
  </div>
</div>