Showing only a specific section of a rotating image - css

Question

I have an image that I've gotten to rotate in an endless circle.
However, I'd like to know if it is possible to show only a section of the image. For example:
Below is the code I have to make the image rotate.
.vinyl {
height:2072px;
width:2072px;
display:block;
position:absolute;
top: -1150px;
left: -200px;
background:url('http://level42.ca/mike-vinyl/img/Record.png') right no-repeat;
-webkit-animation: spin 2s infinite linear;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-ms-animation: spin 2s infinite linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-o-keyframes spin {
0% {
-o-transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
}
}
#-ms-keyframes spin {
0% {
-ms-transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
}
}
This is going on a wordpress theme and is ideally going to fill the header background. (Approx 1500x300 px)
I've got the image in the header, but it is on top of all other objects, and covers have the webpage.
Hope this makes sense.
*Note, this is just a prototype/idea that I have, not sure if it will be practical or completely implemented at all.
[Edit 1]
Following the suggestion below, I was able to achieve exactly what I was looking for, however. The site-sponsorship class that I have is stuck in the background. How can I force it on top?
<header id="masthead" class="site-header" role="banner">
<div class="vinyl-wrapper">
<div class="vinyl-background">
</div>
<h2 class="site-sponsorship">
<div>
<span style="">Presented by: </span>
<img src="http://level42.ca/mike-vinyl/img/sunriselogo3.png" style="width:200px;height:62px;vertical-align:bottom">
</div>
</h2>
</a>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php get_search_form(); ?>
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
</header><!-- #masthead -->

Answer 1

Certainly possible, you could wrap the rotating image inside of a container element with relative positioning and hidden overflow. For example, with a container .header:
.header{
width:100%;
height:200px;
/* These are the important styles */
position:relative;
overflow:hidden;
}
Here's a JSFiddle demonstrating the implemented code, using the same CSS that you provide. Hope this helps! Let me know if you have any questions.
EDIT: In your addition to your question, it doesn't look like you close .vinyl-wrapper. If this was intentional, then you could use z-index to get .site-sponsorship to appear on top:
.site-sponsorship {
position:relative;
z-index:1;
}
Otherwise (if .site-sponsorship is actually outside .vinyl-wrapper), the fix will need to be a bit different, and you could also absolutely position .site-sponsorship (still using z-index):
.site-sponsorship {
position:absolute;
z-index:1;
top:0;
}
Here's a JSFiddle showing the second fix.