2 Replies - 297 Views - Last Post: 09 November 2017 - 12:45 PM

#1 Liljeqvist  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-September 17

Parallax image behind non-rectangular header?

Posted 05 November 2017 - 10:11 AM

I am playing around with header styling and thought it could be cool to experiment with non-rectangular headers.
My experimental header looks like this:

<header>
  <div class="header__bg"></div>
  <h1>Header Content</h1>
</header>

header {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.header__bg {
  position: relative;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#ff9d2f, #ff6126);
  transform: skewY(-6deg);
  transform-origin: top left;
}

h1 {
  margin: 0;
  padding: 100px 0;
  font: 44px "Arial";
  text-align: center;
}

header h1 {
  position: relative;
  color: white;
}


Now what I want is for this header to work together with my parallax image, which I have below
<section class="parallax">
</section>

.parallax { 
    /* The image used */
    background-image: url(../Img/webdevelopment-bg.jpg);

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


Unfortunately the result looks like this:

Posted Image

What I want is to get the parallax BEHIND the header instead of underneath it, but messing around with the position has only resulted in ruining the header.

Can someone help me out? =)

Is This A Good Question/Topic? 0
  • +

Replies To: Parallax image behind non-rectangular header?

#2 Liljeqvist  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 25-September 17

Re: Parallax image behind non-rectangular header?

Posted 05 November 2017 - 10:45 AM

I think I might have fixed it, but I am not sure if this is the "proper" method

I gave the parallax a position: relative, and a z-index of -1.
So far this has worked, but is it the "proper" way of doing it?

Sorry. Total newb here.
Was This Post Helpful? 0
  • +
  • -

#3 ge∅  Icon User is offline

  • D.I.C Lover

Reputation: 180
  • View blog
  • Posts: 1,127
  • Joined: 21-November 13

Re: Parallax image behind non-rectangular header?

Posted 09 November 2017 - 12:45 PM

I don't understand your solution. If the image is underneath the header, it is a positioning issue, not a z-index issue.

I use z-index: -1; in one occasion only: when I use pseudo-elements and I want them to display behind their parent. Otherwise I prefer to give the container I want to place on top a greater, positive, z-index than the element to be masked.

If you want to get crazy with non-rectangular elements, I suggest you use SVG with a properly defined shape instead of deforming a rectangle. In this case it is enough but keep it in mind.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1