How to remove borders around a contained image link?

Question

There is a border around the container which is white in color. I tried the border: 0; rule but it doesn't remove it at all.

EDIT: http://mpkosis28.com

CSS:

#content {
  height: 350px;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  text-align: center;
}
#content img {
  top: 30%;
  left: 50%;
  width: 50%;
  background: url(../images/awd/boxas.png) no-repeat center;
  background-size: cover;
  height: 300px;
}
#content a img {
  border: 0;
}

<div id="content" align="center">
  <h1 class="centeredImage"><a href="http://goo.gl/forms/oXBZKgpFzk"><img></a></h1>
</div>

better to show your environment, the snippet worked unexpected. — Alfred Huang, Nov 02 '14 at 07:40
Put a real image in there (instead of an empty `` tag) and your problem will disappear. — Salman A, Nov 02 '14 at 13:55

score 0 · Answer 1 · answered Nov 02 '14 at 07:39

0

This must work:

#content a img {
    border: none;
}

answered Nov 02 '14 at 07:39

M Reza Saberi

7,134
9
47
76

The border is still there, tried both `0` and `none` and the outline. They don't affect the border at all. – hiu28 Nov 02 '14 at 08:26

score 0 · Answer 2 · answered Nov 02 '14 at 07:54

0

First Set image tag attribute border = 0 in your html file

and in css file change like this.

#content a{
    border:none;
    outline:none;
}

#content a img{
    border:none;
    outline:none;
}

answered Nov 02 '14 at 07:54

Munshi Azhar

307
1
8

score 0 · Answer 3 · answered Nov 02 '14 at 09:02

0

If you set the image source in the regular fashion like <img src="..." /> instead of as a background css property it will not show the border. Is there a reason why you need to set it as a background property?

answered Nov 02 '14 at 09:02

ckuijjer

13,293
3
40
45

score 0 · Answer 4 · answered Nov 02 '14 at 13:28

It is just the browser implementation of showing that the src attribute <img> doesn't have valid image link.

Solution for your code:

copy the background url from the css to src attribute of the <img>.
change the <img> to <div>, and adjust it according to your requirements.

How to remove borders around a contained image link?

4 Answers4