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
Post a Comment