Background image for a section in a responsive site not displaying

Question

Basically i am building a responsive site in HTML5 for the first time and to say im having a lot of trouble would be an under statement. Anyway one of the issues im stuck with at the moment is i cant figure out how to get an image i need for a banner section to display!

This is what im trying to achieve:

But i cant get the wave image to display without putting it inline which i dont want to do as it needs to be responsive!?

here's my html code so far:

<header>
    <h1></h1><!-- Logo -->

        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">HOW IT WORKS</a></li>
                <li><a href="#">OUR CUSTOMERS</a></li>
                <li><a href="#">PRICING</a></li>
                <li><a href="#">PARTNERS</a></li>
            </ul>
        </nav>
</header><!-- End of header -->

<section class="container">
    <h2 class="hidden">Lorem Ipsum</h2>
        <div class="banner">

        </div>

</section><!-- End of slider content -->

and here is the css:

.container {
width:auto;
margin: 0 auto;
position:relative;
}

.banner {
background-image: url(../img/banner-lg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

}

If anyone has any input that they think might help it would really be appreciated! I really don't understand why the background image doesn't just show up once it has been set in the css! When i had a slider in place it worked fine but as soon as i removed the slider and went for a static image instead it no longer appears>

Answer 1

Use this in html file.

<style type="text/css">
  body{
       background:url("image.jpg");
       background-size: cover;       /* For flexibility */
       }
</style>

Note: Put image in main folder not in images folder.