CODEWITHSUNDEEP
phphtmlcss
unknown
unknown

Reputation: 55

Strange lines with many divs

The problem can be shown here. I was experimenting with thousands of fixed div boxes to create a randomly generated background. I am aware this has a big impact on performance.

However, I was wondering if there was any solution to the strange white lines in the background of my webpage. I am almost 100% certain there is nothing wrong with my php & css that is determining where the boxes are placed in my background but, here it is just in-case. 

define('ROWS', 100);
define('COLUMNS', 100);


    $boxes = array();
    for($i = 0; $i < ROWS; $i++) {

        $boxes[] = array();
        for($j = 0; $j < COLUMNS; $j++) {
            $boxes[$i][$j] = randColor();

?>
#back<?php echo $i*COLUMNS + $j; ?> {
    background: #<?php echo $boxes[$i][$j]; ?>;
    width: <?php echo 100.0/COLUMNS ?>%;
    height: <?php echo 100.0/ROWS ?>%;
    left: <?php echo $j * 100.0/COLUMNS?>%;    
    top: <?php echo $i * 100.0/ROWS ?>%;
    position: fixed;
    z-index: -300;
}

Upvotes: 0

Views: 35

Answers (1)

AMG
AMG

Reputation: 704

Try instead using <canvas> and split the canvas up in pieces instead of divs. It is a rectangular area in a HTML file on which you can draw anything including parts.

Example: Draw a Circle

Javascript

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Html

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Upvotes: 2

Related Questions