How to print a background image in twitter bootsrap

Question

I am just wondering how I can print a background image in a div in bootstrap. I can see the image in the page but when I try to print it is not there.

Here is my html

  <div class="row">

 <div class="col-p-3 card">1</div>
 <div class="col-p-3 card">1</div>
 <div class="col-p-3 card">1</div>
 <div class="col-p-3 card">1</div>
    
 </div>

And here is my css

@media print {
  .col-p-1, .col-p-2, .col-p-3, .col-p-4, .col-p-5, .col-p-6, .col-p-7, .col-p-8, .col-p-9, .col-p-10, .col-p-11, .col-p-12 {
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;


   margin-right: auto;
   margin-left: auto;
  }

   .card{
    height: 200px;
    width:200px;
    background-image: url('card.jpg');
  }
}

I can be able to print a background image for a whole page. I followed this link, How do I print only for a div? Will appreciate for any help

score 0 · Answer 1 · answered Sep 19 '16 at 14:10

0

Your code, as-is, will really print 4 div's with background - just tested it. You can demo it in Google Chrome in DevTools > More Tools > Rendering settings > Emulate CSS Media > print. I would look for fix somewhere else than code.

answered Sep 19 '16 at 14:10

librewolf

434
4
10

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

For any one having the same problem as mine, This is the possible solution. Web browsers disable background graphics by default, make sure that you enable background graphics. This guy really helped me to solve this problem https://stackoverflow.com/a/3894013/6098616.

edited May 23 '17 at 12:16

Community

1
1

answered Sep 19 '16 at 20:45

Muya

142
1
15

How to print a background image in twitter bootsrap

2 Answers2