Relatively created button and image causes creating an additional frame for image. Html

Question

I cant remove border.

This is my code:

<mat-grid-list cols="2" rowHeight="2:1">
   <mat-grid-tile>
     <button mat-raised-button>1</button>
     <img id="image-diamond"/>
   </mat-grid-tile>
</mat-grid-list>

And css:

button{
width: 80%;
height: 70%; 
padding: 20px 40px;
font-size: 32px;
font-family: Arial, sans-serif;
display: inline-block;
background: linear-gradient(to right, #070600 0%, #f7d931f3 50%, #fae901f3 50%, #f7ef8bf3 100%);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position 0.3s;
opacity: 70%;
border: 1px solid #f00;
position: relative;
z-index: 1;
}

#image-diamond{
height: 20%;
width: 10%;
margin-top: 35%;
position: relative;
z-index: 2;
right: 5%;
overflow:hidden; 
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

And image have additional border. Set background transparent or border nothing change. Set thick on 0px also does not change anything, and when creating border there second border is still visable, and I can see 2 borders.

When I set border: 2px solid red; I can see white and red border.

maby it is the outline. try set the outline to none like this: outline: none; — carlos.gmz, Aug 24 '20 at 12:07
if you need to remove the black and red border, then see my solution — s.kuznetsov, Aug 24 '20 at 12:17
i tested it myself and I dont have a white border. maby change the testing conditions, for example the browser. — carlos.gmz, Aug 24 '20 at 13:20

score 0 · Answer 1 · answered Aug 24 '20 at 12:08

0

Try out this it

img {
  text-indent: -999px;
}

answered Aug 24 '20 at 12:08

Kirubel

1,461
1
14
33

Unfortunately, it didn't help. – Andy Sparrow Aug 24 '20 at 12:11
Have you tried it with `important`, I've been facing similar issue this was how I fixed mine – Kirubel Aug 24 '20 at 12:14
It still does not help. – Andy Sparrow Aug 24 '20 at 12:20

score 0 · Answer 2 · answered Aug 24 '20 at 12:10

0

use border:none;

in both Like

   button{
border:none;
}
    
#image-diamond{
border:none;
}

answered Aug 24 '20 at 12:10

Sagar Kumar

148
1
8

I was trying everything with border. It isnt border. – Andy Sparrow Aug 24 '20 at 12:12
remove border: 1px solid #f00; from button's css and also border:0; then add border:none; it will remove your button border. same thing do with #image-diamond – Sagar Kumar Aug 25 '20 at 02:47
this code working fine on using border:none; you can share your html file the problem will be another side of your html – Sagar Kumar Aug 25 '20 at 02:54

score 0 · Answer 3 · answered Aug 24 '20 at 12:13

0

add border: 0; and outline: none; - (remove black border) in button tag to css

button{
width: 80%;
height: 70%; 
padding: 20px 40px;
font-size: 32px;
font-family: Arial, sans-serif;
display: inline-block;
background: linear-gradient(to right, #070600 0%, #f7d931f3 50%, #fae901f3 50%, #f7ef8bf3 100%);
background-size: 200% 100%;
background-position: 100% 0;
transition: background-position 0.3s;
opacity: 70%;
border: 1px solid #f00;
position: relative;
z-index: 1;
border: 0;
outline: none;
}

#image-diamond{
height: 20%;
width: 10%;
margin-top: 35%;
position: relative;
z-index: 2;
right: 5%;
overflow:hidden; 
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

<mat-grid-list cols="2" rowHeight="2:1">
   <mat-grid-tile>
     <button mat-raised-button>1</button>
     <img id="image-diamond"/>
   </mat-grid-tile>
</mat-grid-list>

answered Aug 24 '20 at 12:13

s.kuznetsov

14,870
3
10
25

I am trying to remove White border from image. Not from button. – Andy Sparrow Aug 24 '20 at 12:19
I extinguished it, it seems - https://ibb.co/JBq3PJz! On a black background. But `border: 0` helps me to remove it! – s.kuznetsov Aug 24 '20 at 12:26
You have an idea why for me setting border to 0 does not change anything? – Andy Sparrow Aug 24 '20 at 12:30
I can assume that this is a style overlap with a higher priority. Try to put `border: 0!important`. If it doesn't help, then leave a link to the site here.. – s.kuznetsov Aug 24 '20 at 12:33
...or maybe it's a pseudo-element `::before` or `::after` – s.kuznetsov Aug 24 '20 at 12:36
https://stackblitz.com/edit/angular-ccwmh7?file=src%2Fapp%2Fgrid-list-overview-example.css – Andy Sparrow Aug 24 '20 at 12:41
Interface is not extensive, unfortunately I have no experience with html and css but it seems to be some kind of abnormal behavior. – Andy Sparrow Aug 24 '20 at 12:50
I was end work yesterday. But FluffyKitten added solution. – Andy Sparrow Aug 25 '20 at 05:36

score 0 · Accepted Answer · answered Aug 24 '20 at 13:16

You can't change it, that is the default browser behaviour.

Just like when an image has an invalid src and the browser shows a "broken image" icon, if an image has no src the browser shows a border to show where the image would be. For more information, see:

It looks like you want to set a background image - to do that, you don't use an img element, you can use some other element such as a div, e.g.

<div class="image-with-background"></div>

.image-background {
  height: 100px;
  width: 100px;
  background-image: url("https://lorempixel.com/output/technics-q-c-600-400-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

See the example below:

.empty-img {
  height: 100px;
  width: 100px;
}

.image-background {
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.background-url {
  background-image: url("https://lorempixel.com/output/technics-q-c-600-400-1.jpg");
}

<p>A "broken image" img element with no src: </p>
<img class="empty-img" />

<p>A div element tag with no backgrouund image, but using your background CSS -> no border: </p>
<div class="image-background"></div>

<p>A div element tag with a background image: </p>
<div class="image-background background-url"></div>

Relatively created button and image causes creating an additional frame for image. Html

4 Answers4