need CSS help with background images repeating

Perseus

Perseus

Registered
Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {background-image: url("mencbg.gif"); background-repeat: repeat-xy; background-color: #DBDBDA;}
</style>
</head>
<body>
etc
</body>
</html>

Here is my problem:
I have an image (mencbg.gif) thats 50 px by 20 px. When I repeat the image in the background, there seems to be a white line, one pixel in height, dividing each repeated image line. I want my background to be smooth, and have this line removed. How can I do this? Thanks!
 
Are you entirely sure that your image doesn't have a one-px line either at the top or bottom of the image? (Especially since your background is NOT white, it'd be odd for white to shine through)

You shouldn't need to define the background-repeat either because you're repeating both x and y, which is the default behaviour.

Does it work in any browser?
 
First make sure that the white line is not part of the image. After that you may want to try and remove "background-repeat: repeat-xy;" from your code, I doubt you'll need it for the image to repeat, it will repeat by default.

Hope that helps.
 
Here is my code now (with no gray background defined or xy defined):
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {background-image: url("mencbg.gif");}
</style>
</head>
<body>
etc
</body>
</html>

I STILL get a white line. What do you think is up? I zoomed in to my image 6400% in illustrator and I do not see any white line.
 
If you can, post the image here and we'll have a look. One way to be absolutely sure (but which doesn't use lovely CSS) is to just put the background image in the background property of the actual body tag:

Code: 
<html>
<head>
<title>Horribly old style HTML</title>
</head>
<body background="mencbg.gif">
&nbsp;
</body>
</html>

I know it's not what you want, but if there's a white line then, you can be one hundred percent sure that the line is part of the image.

As I said, if you can attach the image or put it online somewhere we can have a better look for you.
 
First off, repeat-xy is invalid CSS code...it should be just repeat if you want it to do both. You can also combine those BG properties like so:
Code: 
background: #dbdbda url("mencbg.gif") repeat top left;

Check your image with a background color behind it. I'd say chances are you have some transparency on the bottom or top edge of it, which is causing the line.
 
Perseus said:
I STILL get a white line. What do you think is up? I zoomed in to my image 6400% in illustrator and I do not see any white line.
Click to expand...

If it is a vector shape from Illustrator, make sure that it has no stroke applied to it. It is possible that it may have a white stroke which is causing the problem.
 
Thanks everyone for your help! After checking the image, I decided to make it square (50x50) instead of 50x20. For some reason, this fixed it.
 
You must log in or register to reply here.
Back
Top