MrCleanX MrCleanX - 3 months ago 106
CSS Question

CSS Containing a Background Image in a DIV

I'm kind of stuck here trying to figure out how to keep a background image from sagging below it's DIV. I've had to resort to some rather unsavory tactics.

.animation span {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -999;
animation-name: fade;
animation-iteration-count: infinite;
animation-duration: 40s;
background-size: cover cover;
background-repeat: no-repeat;
background-position: center center;
}

...

<body>
<div id='banner'>
<div class="animation">
<span id="f4"></span>
<span id="f3"></span>
<span id="f2"></span>
<span id="f1"></span>
</div>
<div id="title">
<h1>Silly Webpage Banner</h1>
</div>
</div>
<div id="content" style="background-color:white;">
Content
</div>
</body>


Here is a fiddle

I've had to add height, width, top to the animation class just be able to see the image. If I exclude z-index, the content DIV sinks a layer. I'd really like it to respect background-size and background-position, but I can't figure out why it won't.

Answer

Are you going for something more like this? Where the background animation stuff is all contained within a banner div with a set width/height?

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
#banner {
  position: relative;
  display: block;
  height: 4rem;
  width: 100%;
  overflow: hidden;
}
#banner h1 {
  position: absolute;
  /* Position banner title */
  top:1rem;
  left:1rem;
  padding:0;
  margin:0;
}
#main {
  position: relative;
}
.animation div {
  position: absolute;
  width: 100%;
  height: 100%;
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 40s;
  background-size: cover cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#f1 {
  animation-delay: -0s;
  background-image: url('https://newevolutiondesigns.com/images/freebies/white-wallpaper-14.jpg');
}
#f2 {
  animation-delay: -10s;
  background-image: url('http://hdwallpaperbackgrounds.net/wp-content/uploads/2015/08/White-Background-Wallpapers-3D-Ball.jpg');
}
#f3 {
  animation-delay: -20s;
  background-image: url('http://dlc.middcreate.net/wp-content/uploads/2013/09/quality-photo-for-desktop-white-bubbles-widescreen-picture-and-image-background-wallpaper-with-high-resolution.jpg');
}
#f4 {
  animation-delay: -30s;
  background-image: url('http://hdpic.org/wp-content/uploads/2015/02/Pattern-Black-and-White-Amazing-Background-Cool-Background.jpg');
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  92% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<!DOCTYPE HTML>

<body>
  <div id='banner'>
    <div class="animation">
      <div id="f4"></div>
      <div id="f3"></div>
      <div id="f2"></div>
      <div id="f1"></div>
    </div>
    <h1>Silly Webpage Banner</h1>
  </div>
  <div id="main">
    <div id="title">
    </div>
    <div id="content" style="background-color:white;">
      Content
    </div>
  </div>

</body>