Переопределить фоновое изображение для контейнера с помощью простой сетки

Question

Переопределить фоновое изображение для контейнера с помощью простой сетки

0

Я использую Simple Grid и хочу расширить ширину моего фонового изображения контейнера сетки до полной ширины браузера. Я попробовал несколько методов для расширения изображения, но ничего не работало. Должен ли я обернуть контейнер в другой div и использовать этот div в качестве фона, или есть простое исправление css для моей проблемы?

HTML: (Div id - "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) { ... }

cphill 28 апр. 2014, в 00:58

Источник

Теги:

html

css

background-image

grid

responsive-design

1 ответ

Ещё вопросы

David Taiaroa · Accepted Answer · 2014-04-27T23-06-00.000Z

Посмотрите, поможет ли это вам: http://jsfiddle.net/panchroma/DK9rJ/

Я прокомментировал некоторые из ваших изображений, чтобы было легче увидеть, что происходит. Важным моментом является то, что я добавил обертку вокруг области, где вы хотите полноразмерный фоновый рисунок изображения, и что эта оболочка находится за пределами разделителя класса.

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

Поскольку <div class="body-background"> находится вне <div class="grid..> он будет расширяться по всей ширине, и вам будет хорошо идти.

Удачи!

Это здорово @cphill, спасибо, что дали мне знать