Share via

I don't know why my background-image does not print

Donald Symmons 3,066 Reputation points
2023-04-01T11:15:45.3833333+00:00

In trying to print an ID card, the background image set from imagebuton inside Datalist does not print. Every other control, like label and image can print except background image.

How is it that background image cannot print even after I used window.print();

HTML

<body style="background-color: #fdfdfd; font-family: 'Graphik', sans-serif; font-size: 17px; font-weight: 400;">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="script" runat="server"></asp:ScriptManager>
        <div class="wrapper">
            <nav id="sidebar" style="font-family: 'Graphik', sans-serif;">
                <ul class="list-unstyled sidebar-header" style="padding: 10px; margin: 0 auto; margin-top: 2%;">
                    <li style="margin: 0 7px;">
                        <span class="circle">
                            <asp:Image ID="img11" Class="imagelogo" alt="" runat="server" Height="33" /></span>
                        <asp:Label runat="server" ID="ident" Font-Size="9pt" ForeColor="#546579" Font-Bold="true" Text=""></asp:Label>
                    </li>
                    <li style="margin: 0 7px;">
                        <asp:Label ID="named" runat="server" Font-Size="10pt" Text="" ForeColor="White"></asp:Label>
                    </li>
                    <li>
                        <i class="fal fa-credit-card" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>
                        <asp:Label ID="Units" runat="server" Font-Size="9pt" Text="" ForeColor="White"></asp:Label>
                    </li>
                </ul>
                <ul class="nav navbar-nav list-unstyled components">
                    <li class="nav-item">
                        <a class="nav-link" href="https://quirver.com/dashboard"><i class="fal fa-columns" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Overview</a>
                    </li>
                    <li class="nav-item">
                        <a href="https://quirver.com/certificatedocument">
                            <i class="fal fa-file-certificate" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Certificate</a>
                    </li>
                    <li>
                        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                            <i class="fal fa-file-invoice" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Invoice</a>
                        <ul class="collapse list-unstyled" id="pageSubmenu">
                            <li>
                                <a href="https://quirver.com/invoicetemplate">Template</a>
                            </li>
                            <li>
                                <a href="https://quirver.com/invoicePDF">PDF Document</a>
                            </li>
                            <li>
                                <a href="https://quirver.com/invoiceDOCX">Word Document</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#pageSubmenu1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                            <i class="fal fa-receipt" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Receipt</a>
                        <ul class="collapse list-unstyled" id="pageSubmenu1">
                            <li>
                                <a href="https://quirver.com/receipttemplate">Template</a>
                            </li>
                            <li>
                                <a href="https://quirver.com/receiptPDF">PDF Document</a>
                            </li>
                            <li>
                                <a href="https://quirver.com/receiptDOCX">Word Document</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="https://quirver.com/identificationcard"><i class="fal fa-id-card" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>ID Card</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="fal fa-ticket-alt" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Pass/Ticket</a>
                    </li>
                </ul>
                <ul class="list-unstyled components">
                    <li class="nav-item" id="Li1" runat="server"><a href="https://quirver.com/admindashboard">
                        <i class="fal fa-users" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Manage Account</a>
                    </li>
                    <li class="nav-item" id="Li2" runat="server"><a href="https://quirver.com/settings">
                        <i class="fal fa-user-cog" aria-hidden="true" style="margin: 0 7px; font-size: 10pt;"></i>Settings</a>
                    </li>
                </ul>
            </nav>
            <div id="content" style="font-size: 10pt; width: 100%;">
                <nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="font-size: 12pt; font-weight: 500; border-bottom: 0.1px solid #f3f3f4; background-color: #fff;">
                    <div class="container-fluid">
                        <button type="button" id="sidebarCollapse" class="btn btn-info">
                            <i class="fas fa-bars"></i>
                            <span class="sr-only">Toggle Navigation</span>
                        </button>
                        <button class="btn btn-info d-lg-none ml-auto" id="sideCollapse" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fas fa-bars"></i>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="nav navbar-nav ml-auto">
                                <li class="dropdown" runat="server" style="padding: 5px; font-weight: 400;">
                                    <asp:Label ID="user" runat="server" Font-Size="10pt" Text="" ForeColor="#0b2436"></asp:Label>
                                    <a class="dropdown" data-toggle="dropdown" aria-expanded="false" href="#" style="background-color: transparent; border: none; cursor: pointer;">
                                        <i class="fal fa-user-circle" style="margin: 0 auto; font-size: 11pt; color: #0b2436;"></i>
                                    </a>
                                </li>
                                <li class="dropdown" runat="server" style="padding: 5px; font-weight: 400; color: #0b2436; font-size: 10pt;">
                                    <i class="fal fa-credit-card" aria-hidden="true" style="margin: 0 auto; padding: 5px; font-size: 10pt; color: #0b2436;"></i>
                                    <label runat="server" id="unitlbl"></label>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                <div class="grids">
                    <asp:Label ID="labelid" runat="server" Visible="false"></asp:Label><asp:Label ID="createby" runat="server" Visible="false"></asp:Label><asp:Label ID="role" runat="server" Visible="false"></asp:Label>
                    <div class="row col-sm-12" runat="server" style="width: 100%; margin: 0 auto; padding: 10px; margin-bottom: 0%;">
                        <div class="col-sm-3" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff;">
                            <div class="card" style="width: auto; background-color: #fff; border: none;">
                                <div class="card-body">
                                    <asp:DataList ID="TemplateList" runat="server" Width="100%" RepeatDirection="Horizontal" RepeatColumns="3" CellSpacing="2" RepeatLayout="Table" CssClass="row">
                                        <ItemTemplate>
                                            <asp:ImageButton ID="ImageButton1" CssClass="ImageButton" runat="server" ImageUrl='<%# "data:image/png;base64," + Convert.ToBase64String((byte[])Eval("Data")) %>' Height="100" BorderStyle="Solid" BorderWidth="1" />
                                        </ItemTemplate>
                                    </asp:DataList>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-5">
                            <asp:Panel Class="print-contents" ID="pnlContents" runat="server">
                                <div class="card" id="IDcard" runat="server" style="margin: 0 auto; width: 78%; height: 430px; border-radius: 10px; background-image:src();">
                                    <div class="row" runat="server" id="header" style="width: 100%; margin: 0 auto; margin-top: 2%;">
                                        <div class="col-2">
                                            <asp:Image ID="Image2" ImageUrl="image.png" CssClass="idcardimg" AlternateText="logo" runat="server" Height="28" />
                                        </div>
                                        <div class="col-8">
                                            <div style="float: inline-start;">
                                                <div style="text-align: center;">
                                                    <asp:Label ID="lblName" runat="server" Text="Organization Name"></asp:Label>
                                                </div>
                                                <div style="text-align: center;">
                                                    <asp:Label ID="addresslbl" runat="server" Text="Contact Address"></asp:Label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="text-align: center;">
                                        <asp:Label ID="TypeLbl" runat="server" Text="ID card Type"></asp:Label>
                                    </div>
                                    <div class="contained" runat="server" id="middle" style="margin-bottom: 3%; margin-top: 20%; margin: 0 auto; text-align: center;">
                                        <br />
                                        <div style="text-align: center; margin-top: 20%;">
                                            <div style="text-align: center; margin-top: 20%;">
                                                <asp:Image ID="Image1" runat="server" Width="80" Height="80" />
                                            </div>
                                            <div style="text-align: center; margin-top: 3%;">
                                                <asp:Label ID="Namelbl" runat="server" Text="Holder's Name"></asp:Label>
                                            </div>
                                            <div style="text-align: center; margin-top: 3%;">
                                                <asp:Label ID="DeptLbl" runat="server" Text="Title/Department"></asp:Label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" runat="server" id="below" style="width: 100%; margin-top: 30%; vertical-align: bottom;">
                                        <div class="col-sm-5">
                                            <div class="form-group" style="float: left; font-size: 5pt;">
                                                <div class="input-group">
                                                    <asp:Label ID="permitID" runat="server" Text=""></asp:Label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-7">
                                            <div style="float: right; font-size: 5pt; vertical-align: bottom;">
                                                <asp:Image ID="Image3" ImageUrl="Test.png" runat="server" ImageAlign="Baseline" Style="position: relative; bottom: 0px; display: block;" Width="70" Height="70" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </asp:Panel>
                            <div style="margin: 0 auto; padding: 10px;">
                                <asp:Button ID="PermitPrint" runat="server" CssClass="btn navbar-btn" Text="Print ID Card" OnClientClick="return PrintPanel();" />
                            </div>
                        </div>

                        <div class="col-sm-3" style="margin-top: 2%; left: 0; z-index: 999; width: 100%; margin: 0 auto; padding: 10px; border-radius: 4px; border: 0.2px solid #f0f1f2; background-color: #fff; overflow-y: scroll; height: 500px;">
                            <div class="" style="width: 100%; margin: 0 auto; padding: 6px; margin-top: 1%; border-radius: 4px;">
                                <div style="margin-top: 1%; margin-bottom: 4%;">
                                    <label style="font-weight: 500; font-size: 8pt; color: #93979e;">Edit your ID Card</label>
                                </div>
                                <asp:Label ID="Label4" runat="server">Address</asp:Label>
                                 <div class="input-group" style="font-size: 4pt; margin-top: 3%;">
                                    <asp:TextBox ID="TextBox3" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" placeholder="Name" AutoPostBack="true" />
                                </div>
                                <asp:Label ID="colorhead" runat="server">Header Color</asp:Label>
                                <div class="input-group" style="font-size: 4pt;">
                                    <asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                                    <cc1:ColorPickerExtender ID="ColorPicker1" runat="server" TargetControlID="TextBox1"
                                        PopupButtonID="ColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="HeadColor" />
                                    <div class="input-group-append">
                                        <span class="input-group-text" id="ColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                            <span id="toggle_picker" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                        </span>
                                    </div>
                                </div>
                                <asp:Label ID="Label3" runat="server">Middle Card</asp:Label>
                                <div class="input-group" style="font-size: 4pt;">
                                    <asp:TextBox ID="BackTxt" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                                    <cc1:ColorPickerExtender ID="ColorPickerExtender1" runat="server" TargetControlID="BackTxt"
                                        PopupButtonID="BackColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="midColor" />
                                    <div class="input-group-append">
                                        <span class="input-group-text" id="BackColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                            <span id="perm_id" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                        </span>
                                    </div>
                                </div>
                                <asp:Label ID="Label7" runat="server">Bottom Card</asp:Label>
                                <div class="input-group" style="font-size: 4pt;">
                                    <asp:TextBox ID="TextBox5" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" />
                                    <cc1:ColorPickerExtender ID="ColorPickerExtender2" runat="server" TargetControlID="TextBox5"
                                        PopupButtonID="BottomColorBtn" PopupPosition="TopRight" OnClientColorSelectionChanged="DownColor" />
                                    <div class="input-group-append">
                                        <span class="input-group-text" id="BottomColorBtn" runat="server" style="height: auto; background-color: transparent; color: #404344;">
                                            <span id="idcard_id" class="fad fa-eye-dropper" aria-hidden="true" style="cursor: pointer; font-size: 11pt; border: none;"></span>
                                        </span>
                                    </div>
                                </div>
                                <asp:Label ID="fontlbl" runat="server">Choose Font</asp:Label>
                                <div class="input-group">
                                    <input type="text" class="fonts" />
                                </div>
                                <br />
                                <asp:Label ID="Label1" runat="server">Personal Details</asp:Label>
                                <hr />
                                <asp:Label ID="Label2" runat="server">Name</asp:Label>
                                <div class="input-group" style="font-size: 4pt; margin-top: 2%;">
                                    <asp:TextBox ID="TextBox2" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" placeholder="Name" AutoPostBack="true" />
                                </div>
                                <asp:Label ID="Label5" runat="server">Card Type</asp:Label>
                                <div class="input-group" style="font-size: 4pt; margin-top: 3%;">
                                    <asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" ClientIDMode="Static" AutoPostBack="true">
                                        <asp:ListItem>Select</asp:ListItem>
                                        <asp:ListItem Value="STAFF">STAFF</asp:ListItem>
                                        <asp:ListItem Value="STUDENT">STUDENT</asp:ListItem>
                                    </asp:DropDownList>
                                </div>
                                <asp:Label ID="Label6" runat="server">Department/Title</asp:Label>
                                 <div class="input-group" style="font-size: 4pt; margin-top: 3%;">
                                    <asp:TextBox ID="TextBox4" runat="server" AutoCompleteType="None" Font-Size="4pt" CssClass="form-control" placeholder="Name" AutoPostBack="true"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <br />
            </div>
        </div>
    </form>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/fontselect.css" />
    <script src="https://rawgit.com/tommoor/fontselect-jquery-plugin/master/jquery.fontselect.js"></script>
    <script type="text/javascript">
        //This is the javascript for changing label font family.
        $(document).ready(function () {
            function selectFontAndApplyToEle(fontName, callback) {
                $('div.font-select').find('.fs-results li').removeClass('active');
                var dropEle = $('div.font-select').find('.fs-drop');
                var fontToSelect = $('div.font-select').find('.fs-results li:contains(' + fontName + ')');
                dropEle.addClass('fs-drop-op');
                var posFont = fontToSelect.offset().top
                var posFontOffset = $('div.font-select').find('.fs-results li:first').offset().top
                $('div.font-select').find('.fs-results').scrollTop(posFont - posFontOffset);
                fontToSelect.addClass('active').trigger('click');
                setTimeout(function () {
                    $('div.font-select a div').trigger('click');
                    dropEle.removeClass('fs-drop-op');
                    callback && callback(fontToSelect.data('value').replace(/\+/g, ' '));
                }, 500);
            }

            $(function () {
                $('input.fonts').fontselect({
                    style: 'font-select',
                    placeholder: 'Select a font',
                    lookahead: 2
                }).on('change', function (e) {
                    var fontFamily = $(this).val().replace(/\+/g, ' ');
                    $('.card').css('font-family', fontFamily);
                });
                selectFontAndApplyToEle('Anton', function (fontFamily) {
                    $('.card').css('font-family', fontFamily);
                    setTimeout(function () {
                        selectFontAndApplyToEle('Anonymous Pro', function (fontFamily) {
                            $('.card').css('font-family', fontFamily);
                        });
                    }, 1000);
                });
            });
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
    <script type="text/javascript">
        //My sidebar toggle navigation
        $("#sidebar").mCustomScrollbar({
            theme: "minimal"
        });

        $('#sidebarCollapse').on('click', function () {

            $('#sidebar').toggleClass('active');

            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });

        function PrintPanel() {
            window.print();
            var panel = document.getElementById("<%=pnlContents.ClientID %>");
           var printWindow = window.open('', '', 'height=500,width=900');
           printWindow.document.write('<html><head><title>DIV Contents</title>');
           printWindow.document.write('</head><body >');
           printWindow.document.write(panel.innerHTML);
           printWindow.document.write('</body></html>');
           printWindow.document.close();
           setTimeout(function () {
               printWindow.print();
           }, 500);
           return false;
       }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.ImageButton').click(function () {
                var image = $(this).attr('src');
                $('#IDcard').css({ 'background-image': 'url(' + image + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover' });
                return false;
            });
        });
    </script>
</body>

C#

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                DataTable dt = this.GetTemplate();
                TemplateList.DataSource = dt;
                TemplateList.DataBind();
            }
        }
        private DataTable GetTemplate()
        {
            string connectionString = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
            using (SqlConnection con = new SqlConnection(connectionString))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT Data FROM TemplateTable WHERE ContentType = 'image/png'"))
                {
                    using (SqlDataAdapter da = new SqlDataAdapter())
                    {
                        cmd.Connection = con;
                        da.SelectCommand = cmd;
                        using (DataTable dt = new DataTable())
                        {
                            da.Fill(dt);

                            return dt;
                        }
                    }
                }
            }
        }
Developer technologies | .NET | Other
Developer technologies | ASP.NET | Other
0 comments
Accepted answer
  1. Lan Huang-MSFT 30,191 Reputation points Microsoft External Staff
    2023-04-03T03:21:58.44+00:00

    Hi @Donald Symmons,

    you can add the CSS style -webkit-print-color-adjust: exact; to the element to force print the background color and/or image.

    https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust

      $('#IDcard').css({ 'background-image': 'url(' + image + ')', '-webkit-print-color-adjust': 'exact', 'background-repeat': 'no-repeat', 'background-size': 'cover' });

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    0 comments

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. AgaveJoe 30,126 Reputation points
    2023-04-01T14:24:29.8433333+00:00

    Printing is a browser feature not JavaScript, CSS, or C#. The browser is deciding not to print the background image as explained in your previous threads on this subject.

    You can try print-color-adjust but the user ultimately gets to control the browser setting and can override any CSS.

    The recommendation in your previous threads is to create print media namely a PDF.

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.