Override background image for container using simple grid

StackOverflow https://stackoverflow.com/questions/23329976

Question

I am using Simple Grid and looking to expand the width of my background image of a grid container to the full width of the browser. I have tried multiple techniques to expand the image, but nothing has been working. Should I wrap the container in another div and use that div as a background, or is there a simple css fix to my issue?

HTML: (Div id is "body-wrapper-grid") TEST 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <link type="text/javascript" src="navicon.js">
    </head>
<body>

    <!-- Start Navigation Grid -->
    <div class="grid" id="nav-wrapper-grid">
        <!-- Start Columns -->
    <div class="col-1-1">
        <!-- Start Navigation Wrapper -->
        <nav id="nav-wrapper">
            <div id="links">
                <a href="#" id="nav-logo"><img src="images/TEST.png" /></a>
                <ul id="nav">
                    <li><a href="#">TEST</a></li>
                    <li><a href="#">TEST</a></li>
                    <li><a href="#">TEST</a></li>
                    <li><a href="#">TEST</a></li>
                </ul>
            </div>
        </nav>
        <!-- End Navigation Wrapper -->
        </div>
        <!-- End Columns -->
    </div>
    <!-- End Navigation Grid -->

    <!-- Start Mission Statement Grid -->

    <div class="grid grid-pad" id="body-wrapper-grid">
        <div class="col-7-12" id="iphone-mockup">
            <img src="images/iphoneMockup.png" />
        </div>

        <div class="col-5-12" id="mission-statement">
            <div id="main-logo">
                <a href="#"><img src="images/image.png"/></a>
            </div>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id malesuada est. Sed elementum magna dictum aliquam fringilla. Pellentesque nec viverra augue. Nam cursus arcu nec bibendum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent est nisl, pretium sed diam a, porta gravida urna. Donec facilisis eleifend lectus, ac facilisis eros vehicula a. Curabitur hendrerit, risus non pharetra semper, mi ipsum viverra arcu, a tincidunt velit neque vitae enim. Cras elementum est sit amet luctus aliquet.</p>

            <div id="app-store-badge">
                <img src="images/appStoreBadge.png" />
            </div>

        </div>
    </div>
    <!-- End Mission Statement Grid -->

CSS:

html, body {
    margin: 0;
    padding: 0;
    background-color: #cecece;
    overflow-x: hidden;
    font-family: 'HouschkaAlt', Fallback, sans-serif;
}

@font-face {
        font-family: 'HouschkaAlt';
        src: url('fonts/FontName.eot');
        src: url('fonts/FontName.eot?iefix') format('eot'),
             url('fonts/FontName.woff') format('woff'),
             url('fonts/HouschkaAlt-Medium.ttc') format('truetype');
        font-weight: normal;
        font-style: normal; }

#nav-logo img {
    width: 150px;
    height: 40px;
}

.grid {
    background-color: #fff;
}




/*      NAVIGATION LINKS         */

li a {
        display: block;
        width:100%;
        background:#fff;
        color: #3d6430;
        font-size: 15px;
        line-height: 40px;
        text-decoration: none;
        margin-top: 5px;
        padding-left: 20px;
    }


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

    #nav-wrapper-grid {
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    left:0;
    z-index: 100;
    }



    #links {
            width: 960px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 20px;
        }


    #nav-logo {
           float: left;
           display: inline;
        }

    ul {
        width:100%;
        background-color: #fff;
        height: 40px;
        padding: 0;
        display: inline;
        }

    li {
        padding: 0 20px;
        float: left;
        list-style-type: none;
        } 

    #menu {
            display: none;
        }   

    #body-wrapper-grid {
        background: url('images/downtown.jpg') 0 0 repeat-x;
        width: 9999px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        overflow: hidden;
    }

    #iphone-mockup img {
        vertical-align: bottom;
        margin: 0 auto;
        padding-bottom: 0px;

    }


    #mission-statement {
        text-align: center;
        background-color: #fff;
        margin: 0px;
        padding: 10px;
        float: right;
    }


    #main-logo img {
        display: block;
        margin: auto;
    }

    /*      APP STORE BADGE         */

#app-store-badge img {

    width: 200px;
    height: 50px;
    padding-bottom: 10px;
}
}

    #features-detail-grid h3, p {
        text-align: center;
        color: #3d6430;
        font-weight: bold;
    }

/* Navigtion for Small Devices */
@media screen and (max-width: 768px) {

    #nav-wrapper-grid {
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    left:0;
    z-index: 100;
    }

    #menu {
            width:1.4em;
            display: block;
            background:#fff;
            font-size:1.35em;
            text-align: center;
            color: #3d6430;
            float: right;
            top:0;

        }

    #logo {
            float: none;

        }

    #nav.js {
            display: none;
            padding: 0;
        }

    ul {
            width:100%;
            list-style:none;
            height: auto;
        }

    li {
            width:100%;
            border-right:none;
            border-top: 1px solid #3d6430; 
        }


    }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }
Was it helpful?

Solution

See if this helps you: http://jsfiddle.net/panchroma/DK9rJ/

I've commented out some of your images so it's easier to see what's happening. The important bit is that I've added a wrapper around the area where you want the full size image background and that this wrapper is outside the div of class grid. 

<div class="body-background">

    <div class="grid grid-pad" id="body-wrapper-grid">  
    ....
    </div> <!-- close class="grid grid-pad" id="body-wrapper-grid" -->
</div> <!-- close body-background -->

Since the <div class="body-background"> is outside the <div class="grid ..> it will extend full width and you will be good to go.

Good luck!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top