CODEWITHSUNDEEP
htmlcss
gn66
gn66

Reputation: 853

Fixed image inside a clip-path css/html

Please help me, I'm desperate.

I have this:

.post-wrapper_ext
{
  position: absolute;
  width: 536px;
  height: 900px;
  float: left;
  background: url("http://9lives.co.za/wp-content/uploads/2014/02/Chicago.jpg") center center no-repeat;
  color: transparent; 
  -webkit-clip-path: polygon(0 50%, 100% 50%, 50% 100%, 0 50%);
}

This produces a triangle with an image inside. But, I want to create an effect that when I scroll down, the image be fixed.

So I made this changes:

HTML

<div class="post-wrapper_ext"><div id="img1"></div></div>

CSS

.post-wrapper_ext {
  position: absolute;
  width: 536px;
  height: 900px;
  float: left;
  color: transparent; 
 -webkit-clip-path: polygon(0 50%, 100% 50%, 50% 100%, 0 50%);
}

#img1
{
    background: url("http://9lives.co.za/wp-content/uploads/2014/02/Chicago.jpg") center center no-repeat;
    width: 536px;
    height: 900px;  
    position:fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

This works a bit, but still ther's an odd thing happening to that triangle, it changes its dimensions when I scroll. Can someone plz discover what I'm doing wrong?

Thanks,

Upvotes: 1

Views: 1068

Answers (1)

gn66
gn66

Reputation: 853

I found the answer ;)

Just change the: Position:fixed; to background-attachment: fixed

Upvotes: 1

Related Questions