0

I am creating a web app for mobile use and I need to flip the background image when it repeats on the y-axis. How can I do it with CSS or JavaScript? enter image description here

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(&quot;http://localhost:8080/sidath/images/11/25/backImage.png&quot;);">

        <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

please help me to solve this problem. I am facing some issues in this given code snippet. please help me to solve it.

Sidath
  • 379
  • 1
  • 9
  • 25
  • 1
    The JS error you are currently getting is because `#wrap1` is just a `div`, and not a `canvas` element. – CBroe Mar 31 '22 at 06:18
  • so then I should use canvas to make my background image. could you please fix that problem in my code snnippet? – Sidath Mar 31 '22 at 06:22
  • Could you clarify what you want to happen depending on the natural dimensions of the image. Is it always to be at 100vw width or is it to be sized so at least two fit in the viewport or….? – A Haworth Mar 31 '22 at 06:35
  • Actually, I need to fit the background image to the screen, and when the background image repeat, it needs to rotate upside down. – Sidath Mar 31 '22 at 06:37
  • background image should be in actual size and fit to the view port – Sidath Mar 31 '22 at 06:38
  • It can’t be both its actual size and fit to the viewport in all circumstances. Do you want it always to be 100vw width? – A Haworth Mar 31 '22 at 07:27
  • no, actually my main aim is to rotate the image when it repeats. width is not compulsory. – Sidath Mar 31 '22 at 07:32

1 Answers1

0

body {
    height: 1000px;
    width: 300px;
    background-image : url("http://commondatastorage.googleapis.com/codeskulptor-demos/riceracer_assets/img/car_2.png");
    background-repeat: repeat-y;
}

As you can see a pure CSS is not possible. But you can use some Javascript function to invert the bottom image.

A javascript function can be find here