Background-color & Background-image issue

[Sol]

Hi,
I have a background-image at the top of a div, then i've chosen a background colour identical to the image colour so as the list inside the div expands downwards the colour will follow it.

Now my problem is that the top of this image is jaged and so the background colour apears between these jaged edges which is transparent and so i need to some how push the background colour down a few pixles so it wont show at the top.

Any ideas?

Thanks in advance.

Sol.

[JMCDesigner]

Is it available online so we can see the code and whats going on exactly?

[Sol]

i'm afraid not, it's simply and image over a coloured background, and all i need is for the top of the image to be slightly higher then the background colour.

example:

#
{
background-color: #0177C1;
background-image: url(../../pics/recent_comments.png);
border: none;
background-repeat: no-repeat;
}

[PHiL]

Cant you just just the background colour of the image from transparent to whatever colour you want to show?

[Sol]

unfortunately the main background is not a solid colour and so i can't really do that.

[PHiL]

Sorry Im not sure what you mean, do you have a screenshot?

It sounded as if you had an image which is jaggered and the blank space is set to transparent so shows through the background colour of the webpage below, but you dont want to see this colour? Therefore what colour do you want to see instead in the jaggered space?

from your CSS the background colour is solid: background-color: #0177C1

[Sol]

oh sorry i thought i explained it, you see i have the main background which is a repeated image. I then have a side panel and there is a div on the side that has it's own background colour but an image placed over the top of it. Now this image has a jagged top which i want to keep transparent but the background colour of this div comes through.

I think an image will be describe it, i'll get you one in a sec.

[Sol]

Here we are:

Screen1 is with the background:


Screen2 is without the background colour and how i want it to apear:


Thanks for the help.

[PHiL]

Ah I know what you mean now, you dont want the background colour of the div to show, but the background colour (gradient) of the main page background to show through.

Think the ways to do this would be to slice the same part of the gradient where it appears on the background and make it the background of the jaggered image.

Or created a spereate div that will hold the very top part of the background image (the jaggered part) and set the background to transparent on this bit, then put the rest of the background image fading into the div colour in the div below.

[PHiL]

Edit: after seeing the image where it looks like a pattern in the background, you would be better off slicing the jaggered part of the image and putting it in its own div with a transparent bg then creating ajoining div below with a red bg.

[Sol]

Ah that's what i thought, but didn't want to do that

Thanks for the help PHiL, i'll let you know if i can get a work around otherwise i'll be making that seperate div.

Thanks again,
Sol.

[Sol]

Ah ha! i cheated

i removed the background color and selected the div that was inside that held the text.

I increased it's margins and set it's background colour to the colour i wanted. It's perfect now

Thanks for the help though!

Sol.