CODEWITHSUNDEEP
htmlcss
Luke David
Luke David

Reputation: 11

Slideshow Fullscreen Background

I have managed to get a fully functional background slideshow onto my page, but when the page is viewed on smaller screens the slideshow is shifted to the right. This is built with only HTML and CSS. The slideshow is responsive by default and does resize the image as screen size shrinks, but adds an odd margin or padding when the window is scaled to a smaller size. Any help would be appreciated.

HTML

<div class="crossfade">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

CSS

.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: 100%;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: -1;
}
.crossfade{padding:0px;}
/*add images to slideshow*/
.crossfade > figure:nth-child(1) { background-image: url('Images/Logo_PNG.png'); }
.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('Images/Breakfast_Icon.png');
}
.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('Images/Mountain_wolf.png');
}
.crossfade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('Images/Ice_Cream_Logo.png');
}
.crossfade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('Images/Night_Sky_Scene.png');
}
/*crossfade between imgs*/
@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
}
}

Upvotes: 1

Views: 122

Answers (1)

Jeith
Jeith

Reputation: 395

I believe this may be caused by the default CSS values on the figure element. If you look here, you can see that figure HTML element has these default values:

display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;

I believe the 40px margin left & right are causing this additional spacing your seeing. Try adding margin: 0px; to your .crossfade > figure CSS selector like this:

.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: 100%;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: -1;
  margin: 0; /* <- SET MARGIN TO ZERO HERE */
}

Upvotes: 2

Related Questions