Remove white modal image background

Question

I have an image that is showed in a modal. Unfortunately this image has a white background. Only the image should be shown and the white shouldn't be visible.

HTML:

<div id="myModal" class="modal"><div id="close">X</div><img id="modalimg" class="modal-content" src=""></div>

CSS:

.modal-content {
  max-height: 850px;
  max-width: 1700px;
  width: auto;
  height: auto;
  margin:0 auto;
  margin-top: 20px;
  object-fit: scale-down;
  background-color: #fff;
}
#myModal{
  height: 100%;
  width:100%;
  position:absolute;
  background-color: rgba(0, 0, 0, .5);
  display: none;
  z-index: 20;
}

JS (if needed):

$('.gallery-img').click(function(){
    $('#myModal').css('display', 'block');
    var src = $(this).attr('src');
    $('.modal-content').attr('src', src);
    $('.modal-content').data('src', src);
});
$('#close').click(function(){
    $('#myModal').css('display', 'none');
});

Edit: Second picture for comparison:

Edit 2: Code Pen: Link

Do you mean the shite background is part of the image? You need to crop the image, the code cannot detect the white background and not show it (well, technically you could but that's a huge challenge versus cropping the image) — StudioTime, Jan 27 '22 at 11:35
@StudioTime No ,the white background is not part of the image, the white background is automatically created and it depends on the width and height of an image how large the white background is. You can't see the white background if the image covers it. — Rahm6, Jan 27 '22 at 11:55
@Rahm6 Sandbox is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of your code, You can use StackOverflow's ["Code Snippet"](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) opinion too. — Shivam Sharma, Jan 27 '22 at 14:03

score 1 · Accepted Answer · answered Jan 27 '22 at 14:10

1

You could set a transparent background color.

.modal-content {
  background-color: transparent;
}

answered Jan 27 '22 at 14:10

gru

2,319
6
24
39

1

Thank you! I only had to add !important to it and it worked. How does it inherit background color? – Rahm6 Jan 27 '22 at 14:16
1

Just replace the `background-color: #fff` in your original css, then you won't need an `!important`. – gru Jan 27 '22 at 14:17
Already did that, didn't work either. I guess it inherits from somewhere. – Rahm6 Jan 27 '22 at 14:22
1

You're right, I just checked the codepen. Those are the jquery image gallery styles. You could work with CSS specificity and add an additional class `custom-modal-content` and define the style based on this selector `.custom-modal-content { background-color: transparent }`. – gru Jan 27 '22 at 14:27
1

Okay, I understand now, many thanks for your efforts. – Rahm6 Jan 27 '22 at 14:41

score 0 · Answer 2 · answered Jan 27 '22 at 12:31

0

Try this:

.modal-backdrop {
   background: none;
}

answered Jan 27 '22 at 12:31

Noob

73
1
8

Unfortunately that doesn't work, as the modal isn't really bootstrap. – Rahm6 Jan 27 '22 at 12:37
A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it. – Tyler2P Jan 30 '22 at 21:56

Remove white modal image background

2 Answers2