Full page rotating rays - html

Question

I have tried to make rotating rays but when it rotate you can see the rays is not on full screen it has empty area from the right and left
you can see the result and code from here: JSFiddle
<style>
#me {
-webkit-animation: rotation 5s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
.win-boxx-container{
z-index:1111111111111111111;
position: fixed;
width:100%;
height:100%;
background-size:100%;
left:0;
top:0;
background: rgba(0, 0, 0, 0.75);
}
.win-lights-bg {
width: 100%;
height: 100%;
left: 0%;
top: 0%;
left: -59%;
top: -57%;
position: absolute;
z-index:11111111111111111112;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 810px -926px;
}
.win-boxx-box{
position:absolute;
margin:auto;
background:url('images/win-boxx.png');
background-size:100%;
background-repeat: no-repeat;
width: 572px;
height: 337px;
text-align:center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index:1111111111111111111123;
}
.centering{
text-align:center;
}
body{
position:fixed;
}
#media all and (max-width: 1000px) and (min-width: 520px) {
.win-boxx-box{
width: 352px;
height: 227px;
}
.win-boxx-stars{
width: 50%;
}
}
#media all and (max-width: 550px) and (min-width: 220px) {
.win-boxx-box{
width: 352px;
height: 227px;
}
.win-boxx-stars{
width: 50%;
}
}
.win-lights-bg{
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 810px -926px;
}
</style>
<div class="win-boxx-container" >
<img id="me" src="http://store1.up-00.com/2015-01/1421959145661.png" class="win-lights-bg" />
</div>

Answer 1

You have a lot of overlapping, unnecessary CSS in your code.
What I did here is create a fucntion that determines the size your spinner should be based on the current window size and sets it up in vanilla js (javascript).
JSFIDDLE DEMO
Script:
function setUpSpinner() {
//get height and width and the spinning element and assign them to variables
var height = window.innerHeight;
var width = window.innerWidth;
var winlightsbg = document.getElementsByClassName('win-lights-bg')[0];
determine the largest and the adjustment factor (I used 1.5 to accomodate the corners when rotating - you may be able to finesse this a bit)
var largest;
if (height > width) {
largest = height;
} else {
largest = width;
}
var adjust = largest * 1.5;
//set up new height, width and offsets
winlightsbg.style.height = adjust + "px";
winlightsbg.style.width = adjust + "px";
winlightsbg.style.left = -((adjust - largest) / 2) + "px";
winlightsbg.style.top = -((adjust - largest) / 2) + "px";
}
//on page load run our spinner set up function once then bind it to the window resize event
window.onload = function() {
setUpSpinner();
window.addEventListener('resize', setUpSpinner, false);
};
CSS:
.win-lights-bg {
width: 100%;
height: 100%;
position: absolute;
z-index:100;
}