5

Just want to ask if it is possible to have a background image in my modal? I've tried searching but I only see background related things on modal which refers to the page itself. What I want is my modal box to have an image background on it. Or change it color? Thanks. I'm not that good in CSS. Thanks.

1

4 Answers 4

8

Assuming you want an image in your modals body you can use

.modal-body {
   background-image: url(path/to/image);
}

Or if you want it behind your modal you can use

.modal-backdrop {
   background-image: url(path/to/image);
}
1
  • Modal body only puts the image as the background on the body (the middle of the modal if you will). Backdrop covers whats behind the modal popup. Is there a way to replace the entire modal background with an image (such that the header/footer are also under that single image)?
    – n00b
    Jan 17, 2019 at 21:02
1

Yes, just use background-image: url(path/to/your/image);

$('#myModal').modal() 
.modal-body {
    background-image: url('http://myfunnymemes.com/wp-content/uploads/2015/04/Doge-Meme-Lion-In-All-Its-Majestic-Glory.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        test
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

1

I assume you are using the bootstrap from

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>

You will need to edit your

<div class="modal-content">
    ...
</div>

to:

<div class="modal-content modal-popout-bg">

css:

.modal .modal-popout-bg {
    background-image: url("http://somepic.com/somepic.jpg");
}
1

I've got required results by below code, may be helpful for someone:

For showing fitting image only in body:

.modal-body {
  background-size: cover;
  background-image: url("./bg_image.png");
}

For showing fitting image in Complete Modal (including header and footer):

.modal-content {
  background-size: cover;
  background-image: url("./bg_image.png");
}

Edit: Modal I used was standard one directly copied from here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.