javascript – Fill background with canvas


How do you strech a background image in a way that when a user scrolls down the backgorund is still the same and does not end with a black white space as the background if the user scrolls more that the screen size

I tried this styling but when testing with firefox I keep on scrolling into a white background

          <style>
          .background {
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            height:  100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
           
            }
          </style>

{% block content%}
<div class="background">
            <canvas width="max-width" height="max-height" id="canv" />
</div>
{% for product  in all products %}
<div style="padding-left:10px; padding-right:5px; padding-top:5px; padding-bottom:5px; float: left;">
            <div class="card" style="width: 20rem; height: 20rem;  opacity: 0.7; "  >
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">{{product.title}}</h5>
                    <p class="card-text">{{product.description}}</p>
                    <a href="#" class="btn btn-primary">{{product.link}}</a>
                </div>
            </div>
        </div>
{% endfor %}
{% endblock%}

in the js file reponsible for creating the canvas I used the height as screen.height same for width but still same result with the white space when scrolling down

for the back end I am using flask



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here