CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
kduan
kduan

Reputation: 659

CSS Background Not Showing

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

Upvotes: 1

Views: 2569

Answers (4)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

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; 

    }

Upvotes: 3

lakshya_arora
lakshya_arora

Reputation: 791

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.

Upvotes: 0

Laniakea
Laniakea

Reputation: 884

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.

Upvotes: 1

Arun Aravind
Arun Aravind

Reputation: 1318

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
}

Upvotes: 0

Related Questions