HTML CSS best way to use background image

Question

I'm looking for easy way (if at all possible) to create background image from this image: http://postimg.org/image/x1kwb0uq3/

There are two horizontal lines and I need one to be at the top of the page all the time and other at the bottom and the thing is that I'm not sure what is the best practise to create such background. Should I slice this horizontal line from image or should I create it programatically using css rules. Because I'm stuck at how many different techniques there are to achieve the same thing and it really confuses me, because I want to write short, clean understandable code and code that is good performance wise.

I thought to do it programatically is a good choice, but still I think that's a lot of code for such simple thing.

Here's what it looks like: HTML

<div id="divs-top">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
</div>

<div id="divs-bottom">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>

CSS:

 body {
    margin: 0;
    padding: 0;
    }

    #divs-top {
    position: fixed;
    top: 0;
    width: 100%;
    }

    #divs-bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
    }

    #div1, #div2, #div3,
    #div4, #div5, #div6,
    #div7, #div8, #div9 {
        width: 11.11%;
        height: 5px;
        float: left;
    }

    #div1, #div6 {
        background-color: #e44b02;
    }

    #div2, #div7 {
        background-color: #60cb34;
    }

    #div3, #div8 {
        background-color: #003f28;
    }

    #div4, #div9 {
        background-color: #ca000d;
    }

    #div5 {
        background-color: #dbff26;
    }

As you see I have to create selector for each div and horizontal line has 9 colors that's why I created 9 divs. By using images it looks like an old technique. Other technique that I'm thinking is to make one div and apply some css styles so that div has border with horizontal gradients but I'm not sure how to do it properly.

What is the standard to do it properly? Any suggestions would be really appreciated as long as you provide a way that is clean and short in code if it's possible.

Answer 1

You could use linear-gradient with color stops to create bands like that. The syntax is simple (explained in inline code comments below):

background-image: linear-gradient(to right, /* gradient from left to right */
    #f00, #f00 25%,         /* start with red, end with red at 25% */
    #00f 25%, #00f 50%,     /* blue at 25% continue up to 50% */
    #0f0 50%, #0f0 75%,     /* green at 50% continue up to 75% */
    #000 75%, #000 100%     /* black at 75% continue up to 100% */
);

To keep it simple, in the example below there are two divs for the bands and a middle div for the content. You can then take it to next level by using ::before and ::after pseudo-elements on the content and eliminate separate divs for the bands.

Example Fiddle: http://jsfiddle.net/abhitalks/nve9v0mn/1/

Example Snippet:

div.line {
    height: 6px;
    background-image: linear-gradient(to right, 
        #f00, #f00 25%, 
        #00f 25%, #00f 50%, 
        #0f0 50%, #0f0 75%, 
        #000 75%, #000 100% 
    );
}
div.content {
    min-height: 60vh;
    background-color: #eee;
}

<div class="line"></div>
<div class="content"></div>
<div class="line"></div>

---

Edit:

If you want to support IE < 9, then the easiest would be to take a screenshot in a modern browser and use that image as a fallback. Remember though that background shorthand properties do not work well with IE<9 for all properties.

Your CSS would look something like this:

div.line {
    height: 6px;
    background: url('http://i.imgur.com/HTLnBfj.png') no-repeat;
    background-size: 100%;
    background-image: linear-gradient(to right, 
        ...
    );
}

Example Fiddle 2: https://jsfiddle.net/abhitalks/nve9v0mn/4/embedded/result/

Answer 2

You could use CSS gradients to get those colored borders. Upload an image containing only one colored border to http://www.colorzilla.com/gradient-editor/ (import image) and this service will output a CSS gradient for you.

When using background gradients you also only need one HTML element – the one that should have top and bottom borders (e.g. the body element). The following examples uses pseudo elements on the body tag to create those borders. The used gradient is not like yours, but you can click it yourself using the linked gradient editor.

    body:before,
    body:after {
        content: '';
        position: fixed;
        left: 0;
        width: 100%;
        height: .5em;
    }

    body:before {
        top: 0;
        background: linear-gradient(to right, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
    }

    body:after {
        bottom: 0;
        background: linear-gradient(to right, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
    }

Answer 3

You can use 1px single img and repeat in background of divs-top for top bar and same thing for bottom div.