5

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:

enter image description here

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>

3
  • Can you post the code with the image inline (that achieves the desired effect)?
    – Trojan
    Nov 3, 2013 at 19:33
  • <div class="banner"> <img src="../img/banner-lg.jpg)" /> </div> but this doesn't really work as the image is left aligned and repeats
    – DannyW86
    Nov 3, 2013 at 19:35
  • 1
    @DannyW86 try with background-size:cover.
    – Vucko
    Nov 3, 2013 at 21:00

3 Answers 3

5

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.

0

Your banner class seems to be lacking width and height so it may be collapsing. Can you verify in the developer console of your browser?

0

This post might be old, but here's answer for those who came here to get answer.

add the following lines to the .banner in the css style thing

height: 100%;
width: 100%;

If you want custom width you can play with the percentage, but if you want a specific width and height in PX you can do the following

height: 500px;
width: 1000px;

Change the width and height to your desired width and height.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.