CSS Background Not Showing

Question

Hey guy's I've been trying out something different with my CSS backgrounds in order to make a header line. I want to have it set up so the line is made up of 5 equally sized portions with each portion being a different color. Here is an example enter image description here I have the code set up but I can't get the background to show up properly I have my code down below. Any help would be 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;
}

Why not simply use borders?

Bram Vanroy
– Bram Vanroy

2013-10-06 14:23:07 +00:00
Commented Oct 6, 2013 at 14:23 — Bram Vanroy
– Bram Vanroy, Commented Oct 6, 2013 at 14:23

Gurpreet Singh · Accepted Answer · 2013-10-06 15:28:16Z

3

You need to float the DIV elements and add height. Working DEMO

Added a 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; 

    }

edited Oct 6, 2013 at 15:28

answered Oct 6, 2013 at 14:16

Gurpreet Singh

21.3k5 gold badges47 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Laniakea · Accepted Answer · 2013-10-06 14:27:54Z

1

You could achieve this by using background for color. And the reason why your divs are not showing up is because you need to give them a height and also you need to float them to the left.

#div-line div {
    float:left;    
    }

#div-line {
    width:100%;
    height:5px;
   }

.blockOne {
    width:20%;
    height:100%;
    background:#00FFFF;
    }

.blockTwo {
    width:20%;
    height:100%;
    background:#FFA500;
    }

.blockThree {
    width:20%;
    height:100%;
    background:#00FFFF;
    }

.blockFour {
    width:20%;
    height:100%;
    background:#FFA500;
    }

.blockFive {
    width:20%;
    height:100%;
    background:#00FFFF;
    }

Working sample here.

edited Oct 6, 2013 at 14:27

answered Oct 6, 2013 at 14:20

Laniakea

8948 silver badges27 bronze badges

Comments

Arun Aravind · Accepted Answer · 2013-10-06 14:13:14Z

0

Why do you want to use background images where you can use background-color ?

You can offload the server atleast if you use background color.

.blockN {
 width: 20%;
 background-color: #0094ff; // or your color
}

answered Oct 6, 2013 at 14:13

Arun Aravind

1,33810 silver badges9 bronze badges

Comments

lakshya_arora · Accepted Answer · 2013-10-06 14:30:12Z

Do something like this

.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;
}

OR

.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;
}

The thing you are trying to do ie, background-image:url(images/orangeBlock.png) is used in linux.

Collectives™ on Stack Overflow

CSS Background Not Showing

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related