I am in the process of developing a mobile web app and I need assistance with flipping the background image when it repeats along the y-axis. Can someone guide me on how to achieve this using CSS or JavaScript? https://i.stack.imgur.com/b107V.jpg
var el = $('body')[0];
var src = $(el).css('background-image').slice(4, -1);
var img = new Image();
checkHeight = function(){
if(img.height < window.innerHeight){
repeatBg();
}
}
img.onload = checkHeight();
img.src = src;
function repeatBg(){
var canvas = $('#wrap1')[0];
var ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height *2 ;
ctx.drawImage(img,0,0);
ctx.scale(1, -1);
ctx.translate(0, -img.height);
ctx.drawImage(img, 0, -img.height, img.width, img.height);
var dataURL = canvas.toDataURL();
$(el).css({
'background-repeat' : 'repeat-y'
});
$(window).off('load, scroll, resize', checkHeight);
}
$(window).on('load, scroll, resize', checkHeight);#wrap1 {
background-repeat: repeat-y;
background-position: center;
background-size: contain;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap1" style="background-image: url("http://localhost:8080/sidath/images/11/25/backImage.png");">
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
</div>this is the image link:- Background image
Can anyone assist me in resolving the issues I am encountering with this code snippet? Your help would be greatly appreciated.