i want set fixed background image covers div reason when add fixed css, image gets stretched way beyond boundaries of div.
these 2 examples, 1 fixed (incorrect dimensions) , other correct dimensions it's not fixed (it scrolls page)
#incorrect{ min-height:100px; background: url('http://034.83e.myftpupload.com/wp-content/uploads/2015/04/entete_image.png') no-repeat fixed center/cover; } #correct{ min-height:100px; background: url('http://034.83e.myftpupload.com/wp-content/uploads/2015/04/entete_image.png') no-repeat center/cover; }<div id="incorrect"></div> <br> <div id="correct"></div>how both of these properties work together? incompatible?
edit: reason,the fixed property relative viewport , not element itself higher screen, bigger image gets. there turnaround?
what trying not possible pure css.
when use background-attachment: fixed; makes image act same position:fixed.
position:fixed explained via https://developer.mozilla.org/en-us/docs/web/css/position
do not leave space element. instead, position @ specified position relative screen's viewport , don't move when scrolled. when printing, position @ fixed position on every page.
so it's doing taking background image "out of div" , sizing relative viewport itself. why "zooming" , "clipping" background image.
you can work around issue javascript or jquery. here snippet code used example:
$(window).scroll(function() { var scrolledy = $(window).scrolltop(); $('#incorrect').css('background-position', 'left ' + ((scrolledy)) + 'px'); });#incorrect{ min-height:100px; background: url('http://034.83e.myftpupload.com/wp-content/uploads/2015/04/entete_image.png') no-repeat scroll center/cover; } #correct{ min-height:100px; background: url('http://034.83e.myftpupload.com/wp-content/uploads/2015/04/entete_image.png') no-repeat center/cover; } div{margin-bottom:200px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="incorrect"></div> <br> <div id="correct"></div>