0

When i run in firefox or chrome or anything it still shows like what seems like a 15px white left border and a 10px white top border for some reason. Does that have something to do with using figure perhaps? (im quite new still to this)

    .crossbgimage > figure {
   animation: imageAnimation 30s linear infinite 0s;
   backface-visibility: hidden;
   background-size: cover;
   border: 0;
   color: transparent;
   height: 100%;
   opacity: 0;
   position: absolute;
   width: 100%;
   z-index: 0;
 }

 .crossbgimage > figure:nth-child(1) { background-image: url('images/BWlandscape2.jpg'); }
  
 .crossbgimage > figure:nth-child(2) {
   animation-delay: 6s;
   background-image: url('images/BWlandscape3.jpg');
 }
  
 .crossbgimage > figure:nth-child(3) {
   animation-delay: 12s;
   background-image: url('images/BWlandscape4.jpg');
 }
 
 .crossbgimage > figure:nth-child(4) {
   animation-delay: 18s;
   background-image: url('images/BWlandscape5.jpg');
 }
 
 .crossbgimage > figure:nth-child(5) {
   animation-delay: 24s;
   background-image: url('images/BWlandscape6.jpg');
 }


    @keyframes imageAnimation {  0% {
  animation-timing-function: ease-in;
  opacity: 0;
 }
  8% {
  animation-timing-function: ease-out;
  opacity: 1;
 }
  17% {
  opacity: 1
 }
  25% {
  opacity: 0
 }
  100% {
  opacity: 0
 }
 }
 <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" type="text/css" href="CSS/bgtest.css">
<head>
    <title>LC</title>
</head>
<body>
  <div class="crossbgimage">
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
  </div>
</body>

So again my question is, where are these borders coming from? Is it something Figure does automatically or did i forget to define something? ive been staring blind at this for a while and just dont see it :)

Muhammad Faizan
  • 1,709
  • 1
  • 15
  • 37
Xio777
  • 1
  • is this all your CSS ? are you uing any other CSS ? – Temani Afif Apr 09 '18 at 13:29
  • Look at the elements through the browser's developer tools. They will show what CSS is applied to what elements and show where they are coming from (Class, Id, element, base rules) – Tyler Apr 09 '18 at 13:29

0 Answers0