html - How to make background-attachment:fixed; not stretch the image? -

html - How to make background-attachment:fixed; not stretch the image? -

i create background image move utilize scrolls , normal utilize background-attachment:fixed; issue is stretching image , not able position anymore.

http://jsfiddle.net/5c3b56a7/3/

.container{ display: block; position: relative; width: 100%; margin:0 0 10px 0; padding:0; overflow:hidden; background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg'); overflow:hidden; background-repeat: no-repeat; background-position: center center; background-size:cover; min-height:350px; } .container2{ background-attachment:fixed; }

you can see issue improve on total screen http://jsfiddle.net/5c3b56a7/3/embedded/result/

first image position center top

second 1 cannot positioned due attachment.

is there way this?

unfortunately cannot utilize background-attachment: fixed , background-size: cover together. when background-attachment: fixed determine background image behave position: fixed element, background-size: cover forced calculate background size relatively element itself.

still can utilize javascript calculate background position in window.onscroll() event.

html css css3 background-image stretch