Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Shane Whittaker
Shane Whittaker
809 Points

I'm trying to have a responsive background image, that fills the page completely, what ever the size but I can't get my background image to load.

Html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tobys Vintage Hire in Exeter, Devon</title>

         <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Limelight' rel='stylesheet' type='text/css'>
        <link href="assets/css/style.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="description" content="Based in Exeter, Tobys Vintage Hire supplies vintage and floral goods for weddings or for prop hire.">
        <meta name="keywords" content="Vintage Hire, Prop Hire, Wedding Hire, Vintage, Exeter, Devon, Prop, Props, Wedding, Design,">
    </head>
    <body>
            <div class="container">
                <div class="row">
                    <div class="span12">
                    <img src="assets/images/header.jpg">
                    </div>
                            </div>
                        </div>
                    </div>
                    <div id="navcontainer">
                    <ul id="navlist">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Items for Hire</a></li>
                        <li><a href="#">Packages</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                 </div>


    </body>
    </html>

Here's the css:

    body{
      width:100%;
      height:100%;
      background-image: url('assets/images/texture.jpg') center center no-repeat;
      background-position: center center;
      background-repeat: no-repeat;
    }

    #navcontainer ul
    {
    padding: .2em 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
    color: #000b00;
    font-family: 'Limelight', cursive;
    font-size: 1.250em;
    text-align: center;
    }

    li { 
    display: inline; 
    }

    li a
    {
    padding: .2em 1em;
    color: #000;
    }

    li a:hover
    {
    color: #00fc45;
    text-decoration: none;
    }

1 Answer

Kevin Korte
Kevin Korte
28,149 Points

background-size:cover; is your friend.

http://css-tricks.com/perfect-full-page-background-image/

Shane Whittaker
Shane Whittaker
809 Points

I've tried that but it makes my image non responsive.

Kevin Korte
Kevin Korte
28,149 Points

This is responsive to me.

http://codepen.io/kevink/pen/qmFba

Shane Whittaker
Shane Whittaker
809 Points

It's responsive to me as well. My main problem was that I couldn't get my image to load from my css stylesheet though.

Shane Whittaker
Shane Whittaker
809 Points

Cheers Kevin Korte, I've managed to sort my image loading problem, and you method of responsive backgrounds is bar far the simplest I've found on the web.

Kevin Korte
Kevin Korte
28,149 Points

Sweet! You're welcome