Below #bg-image-card CSS class is used to display responsive background image in DIV tag for both screen and print view.
<style type="text/css" media="screen, print" >
#bg-image-card{
background-image:url('https://website.com/images/dummyimage.png'); !important;
width: 100% !important;
background-size: contain;
-webkit-background-size:contain;
-moz-background-size:contain;
-o-background-size:contain;
background-repeat: no-repeat;
background-position:center;
height: 100%;
min-height: 254px;
-webkit-print-color-adjust: exact; !important; /*Chrome, Safari */
color-adjust: exact; !important; /*Firefox*/
print-color-adjust: exact; !important;
}
</style>
Below CSS is used to display content in printing mode only
<style type="text/css" media="print">
#SCREEN_VIEW_CONTAINER {
display: none;
}
</style>
Below CSS is used to display content in web view mode only
<style type="text/css" media="screen">
#PRINT_VIEW {
display: none;
}
</style>
Below code is used to display responsive background image in both desktop and mobile view.
<div class="container" id="SCREEN_VIEW_CONTAINER">
<div id="bg-image-card" class="row" align="center">
</div>
</div>
Below code is used to display background image in print view only. It displays fine only if I don't add bootstrap.min.css file on the page, otherwise it doesn't display image in print view mode.
<div class="container" id="PRINT_VIEW">
<div id="bg-image-card" class="row" align="center">
</div>
</div>
If I remove below piece of code from page, it displays background image fine in print view mode. Not sure why but when below link is on the page then background image is not displaying in printing mode. All other code is working fine in screen mode.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">