Fixed image inside a clip-path css/html -


please 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 triangle image inside. but, want create effect when scroll down, image fixed.

so made 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 bit, still ther's odd thing happening triangle, changes dimensions when scroll. can plz discover i'm doing wrong?

thanks,

i found answer ;)

just change the: position:fixed; background-attachment: fixed


Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -