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!

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 Dungaamaa Tudevdorj
Dungaamaa Tudevdorj
8,815 Points

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?

Jonathan Musso
Jonathan Musso
3,760 Points

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

Dungaamaa Tudevdorj
Dungaamaa Tudevdorj
8,815 Points

<!--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

Abhay Sharma
Abhay Sharma
8,287 Points

Whats your css ?

Dungaamaa Tudevdorj
Dungaamaa Tudevdorj
8,815 Points

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

Abhay Sharma
Abhay Sharma
8,287 Points

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

Dungaamaa Tudevdorj
Dungaamaa Tudevdorj
8,815 Points

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

1 Answer

John Paul Ashenfelter
John Paul Ashenfelter
1,118 Points
John Paul Ashenfelter
John Paul Ashenfelter
1,118 Points

Way to go Dungaamaa and Abhay!