The perfect solution
To achieve a zoom effect, consider using either percentage or pixel unit size for the background-size property. You can also add a hover transition to increase the background-size.
An Illustration
#cont-nl {
background: url(https://i.sstatic.net/cAEjm.jpg);
background-repeat: no-repeat;
background-size: 150%;
height: 60vh;
background-attachment: fixed;
margin-right: auto;
margin-left: auto;
background-position: center;
transition: background-size 6s;
}
#cont-nl:hover {
background-size: 200%;
}
<div class="row" id="cont-nl">
<div class="container t-blk-center">
<div class="">
<h1 class="align-left">Next Level Youth Ministry</h1>
<div class="tab-brk"></div>
<h3 class="align-left">For students 6th-12th grade.</h3>
</div>
</div>
</div>
A Drawback
It's worth noting that this approach may not work well with centrally placed background images as it can lead to a glitchy transition in various browsers.
An alternate method
Illustrative Example
When the element doesn't inherit width and height from its parent:
You could place the background image on a pseudo-element. This pseudo-element would be:
positioned absolutely with properties like left: 0 / top: 0
given a z-index: -1 to ensure it stays beneath text layers
sized appropriately with height: 60vh and width: 100vw, matching the parent element
The parent element of the pseudo-element should have position: relative set.
#cont-nl {
height: 60vh;
position: relative;
overflow: hidden;
}
#cont-nl:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background: url(https://i.sstatic.net/cAEjm.jpg) no-repeat;
background-position: center;
background-size: cover;
transition: transform .5s ease-in-out;
z-index: -1;
}
#cont-nl:hover:before {
transform: scale(1.05);
transition: transform .5s ease-in-out;
}
<div class="row" id="cont-nl">
<div class="container t-blk-center">
<div class="">
<h1 class="align-left">Next Level Youth Ministry</h1>
<div class="tab-brk"></div>
<h3 class="align-left">For students 6th-12th grade.</h3>
</div>
</div>
</div>
Different Approach
If the width and height can be inherited from the parent element:
You could use a similar technique by placing the background image on a pseudo-element, which is then:
Remember to set the parent element's position to relative.
#cont-nl {
height: 60vh;
position: relative;
overflow: hidden;
}
#cont-nl:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
background: url(https://i.sstatic.net/cAEjm.jpg) no-repeat;
background-position: center;
background-size: cover;
transition: transform .5s ease-in-out;
z-index: -1;
}
#cont-nl:hover:before {
transform: scale(1.05);
transition: transform .5s ease-in-out;
}
<div class="row" id="cont-nl">
<div class="container t-blk-center">
<div class="">
<h1 class="align-left">Next Level Youth Ministry</h1>
<div class="tab-brk"></div>
<h3 class="align-left">For students 6th-12th grade.</h3>
</div>
</div>
</div>
Regarding Browser Prefixes
Check out caniuse.com to determine if CSS properties are natively supported. Often, prefixes like -webkit- or -moz- may not be required for widely supported properties such as transform and transition.