0

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;
}
Kaylum
  • 1
  • 1
  • 2
    anything in console? – Tyler Sebastian Dec 23 '16 at 22:39
  • try to add the type to the link tag: `type="text/css"` and also close the link tag – Tommy Schmidt Dec 23 '16 at 22:39
  • @TommySchmidt That has centered the image however the image is in a white bar above the particle screen now ( the white bar was not there before) – Kaylum Dec 23 '16 at 22:42
  • @TylerSebastian nope, nothing in console – Kaylum Dec 23 '16 at 22:43
  • @Kaylum but both the script and the stylesheet is applied now, right? for the whitespace problem refer to: http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image. Also make sure to close the img tag. – Tommy Schmidt Dec 23 '16 at 22:45
  • @TommySchmidt I have closed the image tag and removed the white bar, however, my image has gone back to being not centered – Kaylum Dec 23 '16 at 22:53
  • can you update your question and provide the new html, pls – Tommy Schmidt Dec 23 '16 at 22:56
  • @TommySchmidt its been updated :) – Kaylum Dec 23 '16 at 23:06
  • @Kaylum, what is that you wish to achieve? Only with the update is not clear. Thanks. – Syden Dec 23 '16 at 23:11
  • 1
    check the jsfiddle: https://jsfiddle.net/5fdgtgsk/2/. i included comments. the image was centered but the surrounding div (#wrapper) was only 200px wide. so the image (200px in width) filled the wrapper. – Tommy Schmidt Dec 23 '16 at 23:20
  • @TommySchmidt i would like to center the image over the space background – Kaylum Dec 23 '16 at 23:49
  • take a look at: https://css-tricks.com/centering-css-complete-guide/#both-unknown – Tommy Schmidt Dec 24 '16 at 00:02
  • Still not working :( – Kaylum Dec 24 '16 at 00:24
  • `````` tag does not need to be closed. In HTML4, it used to require a closing slash, e.g. ``````. But in HTML5, the closing slash is no longer required. So to display an image, all you need is ``````. Also, why are you using ```
    ```? This is a deprecated tag. [W3C gives suggestions on the best way to center an image](https://www.w3.org/Style/Examples/007/center.en.html#block).     – Tiffany Dec 24 '16 at 00:45

1 Answers1

0

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

Bastien Bastiens
  • 419
  • 6
  • 16