Courtney Ball Courtney Ball - 3 months ago 31x
jQuery Question

jQuery zoom out of background image but keep height

I'm trying to zoom out of a background image, however with a smaller screen resolution the final image after the zoom doesn't fill the container. Is there a way to zoom out of the image but still maintain the height of the wrapper.

$('#banner').css("background-size", "200%");
backgroundSize: '100%',
height: '500px',
}, 7500);

background-image: url('../imgs/banner.jpg');
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
border-bottom: 3px solid #D33F44;
padding: 150px 0px;

JSFiddle here

Notice the white space under the background image after the animation has finished?


You can use a combination of pseudo elements and keyframe animations, I don't think jQuery is necessary here.

.banner {
  position: relative;
  overflow: hidden; /* prevent “spillage” of image */
  width: 100%;
  min-height: 300px;
  padding: 150px 0;
  color: #fff;
  border-bottom: 3px solid #D33F44;

/* Image align to the center, behind the banner */

.banner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('') no-repeat center;
  background-size: cover;
  transform-origin: center; /* scale from the center */
  transform: scale(2);
  z-index: -1;
  pointer-events: none;
  animation: zoom-out 7.5s both;

/* Simple keyframe animation to zoom out the image */

@keyframes zoom-out {
  0%   { transform: scale(2); }
  100% { transform: scale(1.2); }
<div class="banner">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at imperdiet purus. Aenean vitae urna tortor. Vestibulum maximus ut enim vel ultrices.</p>

I recommend reading Using CSS animations on MDN, you will find lots of cool info on how to animate with CSS.

You can also see the demo on JSFiddle: