Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Background image

Hello, I have an issue with my container background. Please help. I have 3 main divs header container and footer. Container div has 3 other divs-menu, slider and content. Container has background URL and repeated, but some reason it only covers background till slider div and content div does not have background. I tracked all closing divs, can't find anything. How can I fix this and have full container div background?

Dungaamaa, can you post the code or show us a live link?

<!--HTML--> <div class="header"> <div class="onerow"> <div class="col6"> <img class="logo" src="img/logo.png" alt="Welcome to Yum Sushi"> </div> <div class="col6 last"> <p class="contact1"><span>Address: </span>9393 G Street<br>Sacramento, Ca 95814 <br><span>Phone: </span>916.444.4444<br>

                                    <span>E-mail: </span>order@yumsushi.com
                </p>
            </div>
        </div>
</div>
<div class="onepcssgrid-1200">
    <div id="container">
        <div class="onerow">
            <div class="col12 last">
                <div class="nav">
                    <ul>
                        <li><a href="">About</a></li>
                        <li><a href="">Menu</a>
                            <ul>
                                <li><a href="#">Lunch</a></li>
                                <li><a href="#">Happy Hour</a></li>
                                <li><a href="#">Dinner</a></li>
                                <li class="last"><a href="#">Drinks</a></li>
                            </ul>
                        </li>
                        <li><a href="">Specials</a></li>
                        <li><a href="">Contact Us</a></li>
                    </ul>   
            </div>
            </div>
        </div>
            <div class="onerow">
            <div class="col12 last">


                    <div class="slider-wrapper theme-default">
                        <div id="slider" class="nivoSlider">

                            <img src="img/slider1.jpg" data-thumb="img/slider1.jpg" alt="" />

                            <img src="img/intro1.jpg" data-thumb="img/intro1.jpg" alt=""  />

                        </div>
                     <div class="nivo-controlNav">
                        <a class="nivo-control active" rel="0">1</a>
                        <a class="nivo-control" rel="1">2</a>
                     </div>

                    </div>
            </div> 
            </div> 

            <div class="onerow">
                <div class="col6">
                    <div class="sushiOfDay">
                        <h2>Sushi of the Day</h2>
                        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue.</p>
                        <img src="img/sushi1.jpg" alt="Sushi of the Day">
                    </div>
                </div>
                <div class="col6 last">
                <div class="chefs">


                        <h2>Chef's Choise</h2>
                        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue.</p>

                    <div class="col5 last">

                        <img src="img/sushi2.jpg">
                    </div>
                    <div class="onerow">
                        <div class="secontRow">
                        <div class="col5">
                            <img src="img/sushi3.jpg">
                        </div>
                        <div class="col5 last">
                            <img src="img/sushi4.jpg">
                        </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>  

</div>
</div>
        <div class="footer">

            <div class="onerow">
                <div class="col4">
                <h2>Get in Touch</h2>
                <p >9393 G Street<br>
                    Sacramento, Ca 95814 <br>
                    916.444.4444<br>
                    order@yumsushi.com
                </p>
                </div>
                <div class="col4 last">
                <h2>Social</h2>
                <p ><a href="">Facebook</a><br>
                    <a href="">Twitter</a><br>
                    <a href="">Google+</a><br>
                </p>

                </div>

                <div class="col 8 last">
                <p class="copyright"><?php echo date('Y'); ?>Design by SunnyStudio &copy;</p>
                </div>
            </div>

So container div background does not cover till footer

Whats your css ?

.container { width:80%; background-image:url(); }

did you tried

.container { 
        width:80%; 
        min-height: 100%; 
        background: url(' ') repeat center center; 
  }

if you want to repeat the background( a texture or seamless design) OR

.container { 
        width:80%; 
        min-height: 100%; 
        background-image: url(' ');
        background-size: cover;
  }

if you want a single image to strech

oh no I did not try min-height. I tried max-height which it did not work. Thank you

1 Answer

Way to go Dungaamaa and Abhay!