CSS - Scaling Into Background Image

Question

I'm having some issues in scaling into my background image.

The issue is:

• Horizontal and vertical scroll bars appear when the scaling happens. I removed the childDiv, thinking that could be it, but no luck. Also tried setting a max-height and max-width however didnt help.

Its almost as if as the image is increasing in width and height, rather than being zoomed into.

My code looks like:

 /* 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%); } 

 <div class="homeDivParent"> <div class="homeDivChild"> Some Text </div> </div> 

Answer 1

I don't know if I unterstand it right, but I think you want to remove the scroll bars, right?

.homeDivParent {
    overflow: hidden;
}