animation happening over 2 background images - css

Question

I have 2 images which I'm trying to make as my background image. I want those images to fade in and fade out after 2 seconds. At present the change in the background image is happening when I hover over the image. How can I make this change happen automatically, without any hover?
.bground {
width:100%;
position:relative;
background: url(../img/bg1.jpg) no-repeat top center;
-webkit-transition-property: background;
-webkit-transition-duration: 1s;
}
.bground:hover {
background: url(../img/bg2.jpg) no-repeat top center;
}
<section id="bground" class="bground">
<div class="display">
<img src="img/logo.png" alt="Logo">
</div>
<div class="page-scroll">
<a href="#about" class="btn btn-circle" style="color:#000000">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</section>

Answer 1

You can use animation property
I've do this code for you (with some img):
.bground {
width: 200px;
height: 200px;
position:relative;
background: url("http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg") no-repeat top center;
-webkit-animation: 4s linear 0s infinite alternate test;
-o-animation:4s linear 0s infinite alternate test;
animation:4s linear 0s infinite alternate test;
}
#keyframes test {
0% {background-image: url("http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png");}
100% {background-image: url(http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg");}
}
<section id="bground" class="bground">
<div class="display">
</div>
<div class="page-scroll">
<a href="#about" class="btn btn-circle" style="color:#000000">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</section>