effect:
For irregular pictures, when the screen out of the image appropriate to the left, but in order not to block the left of the text, move to the left after a certain position where the image is fixed.
method:
To set the background image width and absolute positioning, making the pictures floating on the page. Js inside and then determine the current size of the window, when the page will cause little to the left of the picture block of text, add images to the left attribute, so the picture will not move to the left (if the text is added right property at the right side).
html
<body> <img class="backImg" src="img/backimg.png"> <div id="container"> </div> </body>
css
body { margin: 0px; min-width: 1920px; min-height: 800px; overflow: hidden; } .backImg { width: 1530px; position: absolute; right: 0; top: 0; } #container { position: fixed;
bottom: 250px;
width: 383px; display: flex; flex-direction: column; justify-content: center; margin-left: 131px; }
js
window.onload=function(){ if($(window).width()<=1660){ $('.backImg').attr('style','left:150px;'); } } $(window).resize(function(){ if($(window).width()<=1660){ $('.backImg').attr('style','left:150px;'); } else{ $('.backImg').removeAttr('style'); } })