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>
background-size:cover
.