CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Lena Minime Grønningsæter
Lena Minime Grønningsæter

Reputation: 95

Two background colors (Horizontal)

I'am wondering If It's possible to have two different colors in the background, expanding 100% with bootstrap, en each side.

Here is a screenshot of what i mean,

enter image description here

Red on the left side, dark on the right side, expanding 100% for bigger screens. Any easy solutions for this?

Upvotes: 1

Views: 2471

Answers (3)

Ollie
Ollie

Reputation: 656

You will struggle to do this using only bootstrap. You could achieve the result you are after using linear gradients: http://codepen.io/ollieRogers/pen/snjkw this would need a fallback for browsers that do not support gradient bgs. 

body{
  background: #49191a; /* Old browsers */
background: -moz-linear-gradient(left,  #49191a 0%, #49191a 30%, #53cbf1 30%, #53cbf1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#49191a), color-stop(30%,#49191a), color-stop(30%,#53cbf1), color-stop(100%,#53cbf1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* IE10+ */
background: linear-gradient(to right,  #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49191a', endColorstr='#53cbf1',GradientType=1 ); /* IE6-9 */

}

Upvotes: 2

Kelderic
Kelderic

Reputation: 6687

There are a couple ways to do this. The best way uses pseudo-elements. You'd apply one color to the <body>, and the second color to a created :after element.

HTML:

<body>

    <main>

        <p>This is my first paragraph.</p>

        <p>This is my second paragraph.</p>

        Page continues...

CSS:

body {
    background-color:rgb(155,155,155);
}

body:after {
    top:0;
    left:0;
    width:40%;
    height:100%;
    position:absolute;
    z-index:-1;
    background-color:rgb(239,0,0);
    content:"";
}

main {
    width:80%;
    margin:0 auto;
    background-color:white;
    min-height:400px;
    padding:20px;
}

http://jsfiddle.net/Q66Xn/3/

This answer produces the cleanest code. Disadvantages: Limited IE8 support, no IE7 support. If you need to use those two browsers, then see the next option:

Give the <body> the same background color of one side, then instead of using :after to create a pseudo-element, we just create a real element.

HTML:

<body>

    <div id="bgleft"></div>

    <main>

        <p>This is my first paragraph.</p>

        <p>This is my second paragraph.</p>

        Page continues...

CSS:

body {
    background-color:rgb(155,155,155);
}

#bgleft {
    top:0;
    left:0;
    width:40%;
    height:100%;
    position:absolute;
    z-index:-1;
    background-color:rgb(239,0,0);
}

main {
    width:80%;
    margin:0 auto;
    background-color:white;
    min-height:400px;
    padding:20px;
}

http://jsfiddle.net/Q66Xn/4/

The produces exactly the same as the first method. The advantage is higher browser compatibility, with a disadvantage of a little bit more code.

Finally, you could use a gradient attached to the body. This will give both colors on the single body element, saving extra HTML, but it'll by a nasty set of CSS to support all browsers:

body {
    background: rgb(239,0,0); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzliOWI5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YjliOWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left,  rgb(239,0,0) 0%, rgb(239,0,0) 44%, rgb(155,155,155) 44%, rgb(155,155,155) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(239,0,0)), color-stop(44%,rgb(239,0,0)), color-stop(44%,rgb(155,155,155)), color-stop(100%,rgb(155,155,155))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef0000', endColorstr='#9b9b9b',GradientType=1 ); /* IE6-8 */
}

http://jsfiddle.net/Q66Xn/

Disadvantages: Complex CSS which is difficult to easily edit later on.

Upvotes: 4

Rohan B&#252;chner
Rohan B&#252;chner

Reputation: 5393

You're issue isn't related to bootstrap specific, as Ollie stated.

Some of your options are, using a gradient, or a sliver (a 1px width/height image, which you repeat on which ever axis).

I find using a gradient generator works quite well for most of my new projects I need to startup. I've attached an example for you to try.

Example

http://jsfiddle.net/wLw4r/4/

Markup

    <body>
       <div class="container">
          <div class="row">
            <div class="col-md-12">
              <h2 style="color: white">Something</h2>      
            </div>
          </div>
          <div class="row ">
            <div class="jumbotron">
              <h2>YOLO</h2>
              <div class="row">
                <div class="col-md-4">Something</div>
                <div class="col-md-3">Something</div>
                <div class="col-md-3">Something</div>   
                <div class="col-md-2">Something</div>
              </div>
            </div>
          </div>
        </div>
    </body>

CSS

body {

background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(left,  rgb(169,3,41) 0%, rgb(143,2,34) 26%, rgb(143,2,34) 26%, rgb(0,0,0) 26%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(169,3,41)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* IE10+ */
background: linear-gradient(to right,  rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#000000',GradientType=1 ); /* IE6-9 */   

}

Upvotes: 2

Related Questions