Full Width Background with Container (Not Container-Fluid)

Question

I am trying to make a striped horizontal design with Bootstrap.

This is an example: http://getonepager.com

As seen it uses <section>, inside which it has a div with the .container class (not .container-fluid).

What I do not understand from that site, is the following:

How were they able to make the section background colors/images cover the full width of the site? When I try a similar approach with background-image in css, it does not cover the full width of the page. This is from their css:

#features {
  background-image: url(http://getonepager.com/wp-content/uploads/2015/07/bg1.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-color : #ffffff;
  color : #727272;
}

How come the background image does not zoom, when you zoom in and out of the page with your browser?

I have tried to pull it off with the following code, but no success:

<html>
    <head>
        <title>TODO supply a title</title>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
        <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <style>
            .content{
                padding:20px;
                border: 1px solid #269abc;
            }
            [class*="col-"] {
                padding-top:10px;
                padding-bottom:10px;
                border:1px solid #80aa00;
                background:#d6ec94;
            }
            .fixed-width {
                display:inline-block;
                float:none;
                width: 300px;
            }
            #one {
                background-image: url(http://getonepager.com/wp-content/uploads/2015/07/bg1.png);
                background-repeat: no-repeat;
                background-size: contain;
                background-color : #ffffff;
                color : #727272;
                font-size : 48px;
            }
        </style>
    </head>
    <body>
        <section id="one">
            <div class="container">
                <div class="row text-center">

                    <div class="col-sm-4 fixed-width">
                        <div class="content">ONE</div>
                    </div>

                    <div class="col-sm-4 fixed-width">
                        <div class="content">ONE</div>
                    </div>

                    <div class="col-sm-4 fixed-width">
                        <div class="content">ONE</div>
                    </div>
                </div>
            </div>
        </section>
    </body>
</html>

The `section` elements on that page are full-width - so the backgrounds applied to those sections are able to cover the full width as well ... no black magic involved here. — CBroe, Jun 16 '16 at 13:35
Related - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Jun 16 '16 at 13:50
@Leothelion Learning how it is done is the whole point of my question. I have been spending days trying to figure out how to do this. If I wanted to copy it I would not have bothered to ask how it was done. — Anders, Jun 16 '16 at 13:54
@Paulie_D I am not asking to be recommended any offsite resource. I am asking how to make an image / color stretch the full background, when a `.container` class is used. — Anders, Jun 16 '16 at 13:55
@CBroe Added an example of code I wrote, but I could not get the image to stretch across the full page unfortunately. Any idea? — Anders, Jun 16 '16 at 13:59

Rob · Accepted Answer · 2016-06-16T14:07:25.463

1

The reason your image won't fill the complete element is because you use background-size:contain;. With that, the image will be contained inside that element by resizing the image to fit in either height or width. If one size is smaller than the other, so be it.

The image will be made tall enough to fit the element or, in your case, wide enough to fit the element while keeping the same aspect ratio.

This is also why your image is not resizing on zoom. The width of that element is also the width of the browser. Therefore, contain keeps the image width the same as the element width which is the width of the browser.

edited Jun 16 '16 at 14:07

answered Jun 16 '16 at 14:01

Rob

14,746
28
47
65

Ah, thank you so much!! I have been wondering about this for days. The `background-size: contain` setting also answers my first question. As long as the image has a higher width/height ratio than the section/div i place it in, it will cover the full width and not change as I zoom in and out. Which was the desired behavior. Thanks again! – Anders Jun 17 '16 at 03:42

Full Width Background with Container (Not Container-Fluid)

1 Answers1