My code looks like this:-
HTML
<div id="header-main"></div>
CSS
#header-main {
background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/planet-bg.jpg);
background-position: center;
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 1075px;
position: relative;
display: block;
transition: background-size 300ms ease-in;
-moz-transition: background-size 300ms ease-in;
-web-kit-transition: background-size 300ms ease-in;
background-position-y: 22%;
}
When resizing the browser, I want to maintain the image's height in order to crop the left and right side as the browser shrinks.
I have attempted the following approach:
background-size: auto 100%;
This caused issues with the animation in Safari, which can be seen here.
Another method I tried was using background-size: cover;, but there seems to be no way to animate a background from '93% to cover', so this solution didn't work either.
Are there any other ways to achieve this effect?