tags:

views:

63

answers:

3

Hi all, I have a website where the background need to be stribes (got an image of the stripe) in my body css i set it as background-image and repeat it, so far so good:

    body
{
    font-family: Verdana, Sans-Serif;
    text-align: left;
    margin:0px;
    text-align:center;
    background-image:url(../Gfx/Design/bg.png);
    background-repeat:repeat;
    width:100%;
    height:100%;
}

#BGContainer
{
    margin:0px;
    background-image:url(../Gfx/Design/background.png);
    background-repeat:repeat-x;
    width:100%;
    height:100%;
    z-index:101;
}

Here is my HTML

<body>
    <form id="form1" runat="server">
    <div id="BgContainer">
        </div>
    </form>
</body>

Then i have this other image with a gradient in the top where the stibes fade into another color. This image should overlay the top of the background. This is what i tried to do in my code, but it isnt working. It only shows the tiling of the bg.png located within my body element. I never see the overlay. Anyone?

/Cheers

+2  A: 

Try to add content inside your #BGContainer div, something like &nbsp;

Khalil Dahab
A: 

Can't you just include the gradient overlay into your stripes image?

Or am I misunderstanding your problem?

Zack
Then i cant tile it, the gradient should only appear in the top of the background. Im tiling a small img of the background. and then tiling a bigger image with the gradient on it on top of that (at least thats the plan)
H4mm3rHead
+4  A: 

CSS is (supposed to be at least) case-sensitive - you have #BGContainer in the CSS but BgContainer in the HTML.

Greg
Assuming it's not just a typo here, this would be the problem.
idrumgood
Argh how stupid! thx a bunch that solved it. How terrible embarrassing.
H4mm3rHead