How to remove grey border around background-image on Chrome

Hi guys,

I’ve googled but did not find any solutions. All the other problems have to do with the img tag.
But I already has img { border: none; }

Here’s my code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>untitled</title>
    <style>
		.foo {
			width: 50px;
			height: 50px;
			background-image: url("img.png");
			background-repeat: no-repeat;
		}
    </style>
</head>
<body>

    <div class="foo"></div>
	
</body>
</html>

How do I remove it, especially on Chrome.

Thanks,

1 Like

Hi, ketting00.

There is nothing in the code that you posted that would create a border. Try it yourself, you’ll see nothing as we do. You’ll have to post a link to the page being developed or enough code to demonstrate the problem.

1 Like

Also, styling the img tag with border: none; won’t affect background images. Maybe you have set a border to that div in your actual markup?

1 Like

Or possibly the image itself has a gray border

Thank you,

But the border is actually gone if I hover it. I didn’t include it here. I’ll try several images and see about it.

Then it’s not the image but most probably CSS. A link would be nice, or maybe a fiddle which demonstrates that behaviour.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.