css backgrounds images

Hi I have a 1px png file,which I am trying to set as a background image for two divs which are adjacent to each other horizontally.The html and css are as under:-

<div id='one'>hi</div>
<div id='two'>hello</div>

The css is like this

div {
    width: 50%;
    height: 50%
}
#one, #two {
    background-image: url(/images/image.png);
    background-repe开发者_运维知识库at: repeat;
}

Now the problem here is in between the two divs a black border automaticaly appears when the image is set. I dont want the two divs to be seen as separate blocks.Please help. Am totally new to css and need help:-)!

I'd be willing to bet that the image you are using has alpha transparency (that is, the image is partially transparent), and what you're seeing is a one-pixel overlap between the two divs. Either make sure that the container is an even number of pixels wide, or put the divs inside another container and use the background on that instead.

like robert, i'm also not getting the border, but i do get some repeats. see if this works for you:

#one, #two{
    background-image:url(99785.jpg);
    background-repeat: no-repeat;
    borders: 0
    }

The problem is caused by a couple of interacting things.

First, make sure you are using the html strict doctype. This will help mitigate a lot of the formatting issues between browsers around divs. See alistapart for a description and list of real doctypes to use and quirksmode for a detailed comparison of them.

Second, you will more than likely have to set the margin of your divs to 0. Browsers have different default settings. A strict doctype will alleviate most of this, but there are usually other areas you have to overcome as well.

Also, you might want to grab firebug for firefox and leverage chromes dev tools. firebug will actually show you what all of the margins / padding / everything else is being set to. The Chrome tools don't give you a pretty picture with the details but you can see what the margins/padding/etc are in the Computed Style section.