Creating background-image in html to pdf conversion

Question

I will convert my html page to pdf format with dinktopdf and get the a4 output from the printer. I'm converting html content to string, but backgorund-image are not show in display. how can I do that?

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#SC_Header {
            background-image: url('https://cdn.logo.com/hotlink-ok/logo-social.png');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            width: 794px;
            height: 1123px;
        }
</style>
body>
    <div id="main-content xSiyah">
        <section id="SC_Header" class="PageBreak p-4">
            <div class="row">
                <div class="col col-12 text-center" style="text-align:center;">
                    <img src="$$MemberImage$$" class="shadow-sm" style="width:120px; height:130px; position: relative; top: 350px" />
                    <h3 class="Rb xTuruncu custom-title" style="position: relative; top: 165px;">$$NameSurname$$</h3>
                </div>
            </div>

            <div class="row">
                <p style="height:290px;"></p>
                <div class="col col-12 text-center" style="text-align:center; position:relative; right:300px; top:445px">
                    <img src="$$CertificateQRCode$$" class="" style="width:50px; height:50px;" />
                    <p class="custom-text">Certificate Number: <strong>$$ApplicationNo$$</strong></p>
                    <p class="custom-text">Issued Date: <strong>$$CourseEndDate$$</strong></p>
                    <p class="custom-text">Expiry Date: <strong>$$ExpiryDate$$</strong></p>
                </div>
            </div>
        </section>
 </div>
</body>
</html>

PDFService

public async Task<byte[]> ConvertToPDF(string HtmlContent, int TemplateID)
        {
            var doc = new HtmlToPdfDocument()
            {
                GlobalSettings =
                {
                    ColorMode = ColorMode.Color,
                    Orientation = Orientation.Portrait,
                    PaperSize = PaperKind.A4,
                    
                },
                
                Objects =
                {
                    new ObjectSettings()
                    {
                        UseExternalLinks = true,
                        UseLocalLinks = true,
                        PagesCount = true,
                        HtmlContent = HtmlContent,
                        WebSettings = { DefaultEncoding = "utf-8", LoadImages = true },
                        //FooterSettings = { FontName = "Arial", FontSize = 9, Right = "Sayfa [page] / [toPage]", Line = true }
                    }
                }
            };

Creating background-image in html to pdf conversion

0 Answers0