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

Question

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


    
        
        
            
                
                    
                        
                            
                        
                    
                    
                        
                    
                    
                        
                        
                    
                
                
                    
                        Overview
                    
                    
                        
                            Certificate
                    
                    
                        
                            Invoice
                        
                            
                                Template
                            
                            
                                PDF Document
                            
                            
                                Word Document
                            
                        
                    
                    
                        
                            Receipt
                        
                            
                                Template
                            
                            
                                PDF Document
                            
                            
                                Word Document
                            
                        
                    
                    
                        ID Card
                    
                    
                        
                            Pass/Ticket
                    
                
                
                    
                        Manage Account
                    
                    
                        Settings
                    
                
            
            
                
                    
                        
                        
                        
                            
                                
                                    
                                    
                                        
                                    
                                
                                
                                    
                                    
                                
                            
                        
                    
                
                
                    
                    
                        
                            
                                
                                    
                                        
                                            
                                        
                                    
                                
                            
                        

                        
                            
                                
                                    
                                        
                                            
                                        
                                        
                                            
                                                
                                                    
                                                
                                                
                                                    
                                                
                                            
                                        
                                    
                                    
                                        
                                    
                                    
                                        

                                        
                                            
                                                
                                            
                                            
                                                
                                            
                                            
                                                
                                            
                                        
                                    
                                    
                                        
                                            
                                                
                                                    
                                                
                                            
                                        
                                        
                                            
                                                
                                            
                                        
                                    
                                
                            
                            
                                
                            
                        

                        
                            
                                
                                    Edit your ID Card
                                
                                Address
                                 
                                    
                                
                                Header Color
                                
                                    
                                    
                                    
                                        
                                            
                                        
                                    
                                
                                Middle Card
                                
                                    
                                    
                                    
                                        
                                            
                                        
                                    
                                
                                Bottom Card
                                
                                    
                                    
                                    
                                        
                                            
                                        
                                    
                                
                                Choose Font
                                
                                    
                                
                                

                                Personal Details
                                
                                Name
                                
                                    
                                
                                Card Type
                                
                                    
                                        Select
                                        STAFF
                                        STUDENT
                                    
                                
                                Department/Title

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;
                        }
                    }
                }
            }
        }

Accepted Answer

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.

Answer

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.

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

1 additional answer