Stylesheet breaking website

87 views Asked by At

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;
}
1

There are 1 answers

3
Bastien Bastiens On

Some of your tags are not close, some are closed incorrectly.

We always close a link tag within the tag with "/"

<link ... />

Same with images

<img ... /> instead of <img ... ></img>

I think "< center >" is deprecated. With good semantic everything is possible.

It might solve your issue