here example: http://jsfiddle.net/mydkr/8/
here code:
.fixed { height: 250px; width: 250px; background: #000 url('http://placekitten.com/200/600') no-repeat; background-size: auto 100%; background-attachment: fixed; } .notfixed { height: 250px; width: 250px; background: #000 url('http://placekitten.com/200/600') no-repeat; background-size: auto 100%; } the top element not retain background-size property, declares height of background equal height of element.
the bottom element identical, except not have background-attachment: fixed rule.
is rendering bug? i've tested in latest versions of ie , chrome. if so, there way update size of background?
background of element has size of element, fixed on screen, can emulated pseudo-element 'position: fixed'. problem make element clip pseudo-element, because overflow doesn't affect child elements fixed position. workaround (found in russian blog article) know use css clip property (which requires absolute positioned wrapper).
html:
<div class="fixed"><div></div></div> css:
.fixed { height: 250px; width: 250px; position: relative; } .fixed > div { position: absolute; top: 0; left: 0; width: inherit; height: inherit; clip: rect(0px, 250px, 250px, 0px); } .fixed > div::before { content: ''; position: fixed; height: inherit; width: inherit; background: #000 url('http://placekitten.com/200/600') no-repeat; background-size: auto 100%; z-index: -1; } the downside need set value clip in length units (not percantages), may problematic if height of element should dynamic. in case, henrique feijo's solution might more suitable.
