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 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
Post a Comment