Having trouble scaling my background image without causing horizontal and vertical scroll bars to appear. I tried removing childDiv and setting max-height and max-width, but no luck.
It seems like the image is increasing in width and height rather than being zoomed into.
Here's my code:
/* Chrome, Safari, Opera */
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(1, 1);
}
to {
-webkit-transform: scale(1.2, 1.2);
}
}
/* Standard syntax */
@keyframes zoom {
from {
transform: scale(1, 1);
}
to {
transform: scale(1.2, 1.2);
}
}
.homeDivParent {
height: 100%;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(100, 100, 100, 0.1)), url("/assets/images/bgHome.jpg");
background-position: 20% 0%;
background-color: #fafafa;
-webkit-animation: zoom 10s;
animation: zoom 10s;
}
.homeDivChild {
text-align: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Any suggestions on how to fix this issue?