html - CSS Background Not Showing -


hey guy's i've been trying out different css backgrounds in order make header line. want have set line made of 5 equally sized portions each portion being different color. here example enter image description here have code set can't background show have code down below. appreciated, thanks!

html:

<div id="div-line">     <div class="blockone"></div>     <div class="blocktwo"></div>     <div class="blockthree"></div>     <div class="blockfour"></div>     <div class="blockfive"></div> </div> 

css:

    #div-line {     width:100%;     height:5px; }  .blockone {     width:20%;     background-image:url(../images/orangeblock.png);     background-repeat:repeat-x; }  .blocktwo {     width:20%;     background-image:url(../images/blueblock.png);     background-repeat:repeat-x; }  .blockthree {     width:20%;     background-image:url(../images/darkorangeblock.png);     background-repeat:repeat-x; }  .blockfour {     width:20%;     background-image:url(../images/orangeblock.png);     background-repeat:repeat-x; }  .blockfive {     width:20%;     background-image:url(../images/blueblock.png);     background-repeat:repeat-x; } 

you need float div elements , add height. working demo

added generic css class block in html:

<div id="div-line">     <div class="block blockone"></div>     <div class="block blocktwo"></div>     <div class="block blockthree"></div>     <div class="block blockfour"></div>     <div class="block blockfive"></div> </div> 

and tweaked css:

    #div-line {        width:100%;        height:5px;     }      .block {       height:100%;       float:left;       width:20%;       }      .blockone {        background-color:red;        }      .blocktwo {         background-color:black;      }      .blockthree {         background-color:red;      }      .blockfour {             background-color:black;      }      .blockfive {            background-color:red;       } 

Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -