adjust slider to be fullscreen, no scrolling with elements centered around it

Question

I have a slider WMUslider, that I'm trying to make fullscreen, the image adjusts to the window size and the elements adjust to fit the aspect. This should be doable in the css but I just can't get it to work. It's the only thing on the page, right now you have to scroll down to see the whole image. Any help I can get on this I'd really appreciate, I've been trying to do this for a while now and am starting to get very frustrated.

this is the site:

http://www.klossal.com/js/wmuSlider/demo/demo3.html

HTML:

<div class="wmuSlider example1">
<div class="wmuSliderWrapper" style="height:100%;">
<article>
<img src="http://www.klossal.com/portfolio/space_1_header.png" />
</article>
<article>
<img src="http://www.klossal.com/portfolio/space_2_header.png" />
</article>
</div>
</div>

CSS

/* Demo */
.wmuSlider,
.wmuGallery {
margin-bottom: 20px;
}

/* mwuSlider */
.wmuSlider {
position: relative;
overflow: hidden;
}
.wmuSlider .wmuSliderWrapper {
display: none;
}
.wmuSlider .wmuSliderWrapper article {
position: relative;
text-align: center;
}
.wmuSlider .wmuSliderWrapper article img {
max-width: 100%;
height: auto;
}

/* mwuGallery */
.wmuGallery .wmuGalleryImage {
position: relative;
text-align: center;
}
.wmuGallery .wmuGalleryImage img {
max-width: 100%;
height: auto;
}

/* Default Skin */
.wmuGallery .wmuGalleryImage {
margin-bottom: 10px;
}
.wmuSliderPrev, .wmuSliderNext {
position: absolute;
width: 40px;
height: 80px;
text-indent: -9999px;
background: url(http://klossal.com/js/wmuSlider/demo/images/sprites.png) no-repeat 0 0;
top: 50%;
margin-top: -40px;
z-index: 2;
}
.wmuSliderPrev {
background-position: 100% 0;
left: 20px;
}
.wmuSliderNext {
right: 20px;
}
.wmuSliderPagination {
z-index: 2;
position: absolute;
left: 50%;
bottom: 0px;
}
.wmuSliderPagination li {
float: left;
margin: 0 5px 0 0;
list-style-type: none;
}
.wmuSliderPagination a {
display: block;
text-indent: -9999px;
width: 10px;
height: 10px;
background: url(http://klossal.com/js/wmuSlider/demo/images/sprites.png) no-repeat 0      
-80px;
}
.wmuSliderPagination a.wmuActive {
background-position: -10px -80px;
}

body{
background:#141414;
}

Answer 1

Try background-size: cover this will cover the page so it has the width of the screen.