UPDATED The white bar is still there, however, the white bar is smaller and so is the image (the image is within the white bar) and the white bar stretches across the whole page. The white bar is above the particles.js and its background.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='css/style.css' rel='stylesheet' type="text/css">
<title></title>
</head>
<body>
<div id="wrapper">
<center>
<img class='' src='img/kaylumlogo.png'></img>
</center>
</div>
<div id="particles-js"></div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
<script src="js/index.js">
</script>
</body>
</html>
CSS:
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("http://i.imgur.com/5F64MpH.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
#wrapper {
border: 0;
width: 200px;
}
img {
width: 200px;
}
Some of your tags are not close, some are closed incorrectly.
We always close a link tag within the tag with "/"
Same with images
I think "< center >" is deprecated. With good semantic everything is possible.
It might solve your issue