css backgrounds images

Question

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-repeat: 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'm not getting the border, jsfiddle.net/Jn8fL, make sure you don't have a margin/padding set on the DIV from somewhere else. You can also try border: 0; — Robert
– Robert, Commented Sep 22, 2010 at 16:51
It is not one full image but a small image which is to be repeated. Have edited the css in the main post.Missed that out earlier!no border:0 does not help — rubicondude
– rubicondude, Commented Sep 22, 2010 at 17:31
Why would you want to repeat a 1x1 image? Just set background-color and you're done. — nico
– nico, Commented Sep 22, 2010 at 17:53
Are you using a transparent png? Might be some overlap which causes the perceived border. Try changing the width to 49% and see what happens... — Stuart Burrows
– Stuart Burrows, Commented Sep 22, 2010 at 17:56
Inrbob, seems like that would have been the problem.. However am quite new to all these images stuff and understanding things like transparency and alll.. but you and Stan seem to be on the same line and his solution worked! — rubicondude
– rubicondude, Commented Sep 22, 2010 at 18:44

Stan Rogers · Accepted Answer · 2010-09-22 17:51:02Z

1

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.

answered Sep 22, 2010 at 17:51

Stan Rogers

2,18011 silver badges9 bronze badges

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

1 Comment

rubicondude Over a year ago

Thanks Stan! That worked wonderfully.. I put them in one container and applied the background.. actually there were a couple of divs ,which were stuck into one other.. this worked thanks again!

antoniuslin · Accepted Answer · 2010-09-22 16:52:54Z

0

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
    }

answered Sep 22, 2010 at 16:52

antoniuslin

2492 silver badges10 bronze badges

1 Comment

rubicondude Over a year ago

The image is small 1 px-height, width, which is repeated. It repeats itself perfectly in each of the divs which are both with 200px height, width, but at the borders of the two div they leave a line. I dont get this problem in chrome , but in firefox.

ChrisLively · Accepted Answer · 2010-09-22 17:54:22Z

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.

Collectives™ on Stack Overflow

css backgrounds images

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related