1. IronPDF
2. How-Tos
3. HTML to PDF with Images and CSS Assets

Use HTML with CSS and Images to Create PDF in C#

IronPDF is a useful tool for generating PDF documents in .NET projects.

A common use of this library is “HTML to PDF” rendering - where HTML is used as the design language for rendering a PDF document. A logical question is: how can we use CSS stylesheets and Image files in our HTML to PDF Conversion?

Rendering a PDF from HTML string with Image and CSS assets

When working with HTML String to PDF conversion, it's important to set a BaseUrlOrPath parameter for assets such as CSS, JavaScript files, and images. The BaseUrlOrPath specifies the base URL from which all assets will be loaded relative to.

This can be a web URL starting with 'http' to load remote assets, or a local file path to access assets on your disk. Setting the BaseUrlOrPath correctly will ensure that the assets are loaded correctly during the conversion process.

ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf("<img src='icons/iron.png'>", @"C:\site\assets\");
pdf.SaveAs("html-with-assets.pdf");

ChromePdfRenderer renderer = new ChromePdfRenderer();
PdfDocument pdf = renderer.RenderHtmlAsPdf("<img src='icons/iron.png'>", @"C:\site\assets\");
pdf.SaveAs("html-with-assets.pdf");

Dim renderer As New ChromePdfRenderer()
Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<img src='icons/iron.png'>", "C:\site\assets\")
pdf.SaveAs("html-with-assets.pdf")

Another trick is to use the IronPdf.Imaging.ImageUtilities.ImageToDataUri method to convert any System.Drawing.Image or Bitmap object into a html string which can be embedded in html without saving to disk.

var DataURI = IronPdf.Imaging.ImageUtilities.ImageToDataUri(myImageObject);
using var PDF = Renderer.RenderHtmlAsPdf("<img src='"+ DataURI +"'>");
PDF.SaveAs("html-with-embeded-image.pdf");

var DataURI = IronPdf.Imaging.ImageUtilities.ImageToDataUri(myImageObject);
using var PDF = Renderer.RenderHtmlAsPdf("<img src='"+ DataURI +"'>");
PDF.SaveAs("html-with-embeded-image.pdf");

Dim DataURI = IronPdf.Imaging.ImageUtilities.ImageToDataUri(myImageObject)
Dim PDF = Renderer.RenderHtmlAsPdf("<img src='" & DataURI & "'>")
PDF.SaveAs("html-with-embeded-image.pdf")

MVC application

In an MVC application, specifying the file path of an image can be challenging. To ensure that the image can be found by IronPDF and displayed correctly on the website, the baseUrl of IronPDF and src="" attribute on HTML string need to be configured correctly.

With the file hierarchy shown below set

• baseUrlOrPath to @"wwwroot/image"
• src attribute to "../image/Sample.jpg"

wwwroot
└── image
    ├── Sample.jpg
    └── Sample.png

For example:

ChromePdfRenderer renderer = new ChromePdfRenderer();

PdfDocument pdf = renderer.RenderHtmlAsPdf("html.Result", @"wwwroot/image");

ChromePdfRenderer renderer = new ChromePdfRenderer();

PdfDocument pdf = renderer.RenderHtmlAsPdf("html.Result", @"wwwroot/image");

Dim renderer As New ChromePdfRenderer()

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("html.Result", "wwwroot/image")

<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>

<img src="../image/Sample.jpg"/>
<img src="../image/Sample.png"/>

File path formats that do not work

Following formats work well when viewing on Chrome browser, but point to the wrong folder directory when used in an MVC app. These formats still work with IronPDF if baseUrlOrPath is provided in the RenderHtmlAsPdf method:

<img src="image/footer.png"/>  
<img src="./image/footer.png"/>  

<img src="image/footer.png"/>  
<img src="./image/footer.png"/>  

On the other hand, these formats work well with MVC app, but when it comes to file path, these formats do not work well in IronPDF:

<img src="/image/footer.png"/>  
<img src="~/image/footer.png"/>

<img src="/image/footer.png"/>  
<img src="~/image/footer.png"/>

HTML Headers and Footers with Images and Assets

When we render HTML headers and footers to a new or existing PDF, they are treated as standalone HTML documents and do not inherit the BaseURL from the PDF its self.

We should set a BaseURL from which assets may be loaded:

IronPdf.ChromePdfRenderer Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
  Height = 20,
  HtmlFragment = "<img src='logo.png'>",
  BaseUrl = new Uri(@"C:\assets\images\").AbsoluteUri
};

IronPdf.ChromePdfRenderer Renderer = new IronPdf.ChromePdfRenderer();
Renderer.RenderingOptions.HtmlHeader = new HtmlHeaderFooter()
{
  Height = 20,
  HtmlFragment = "<img src='logo.png'>",
  BaseUrl = new Uri(@"C:\assets\images\").AbsoluteUri
};

Dim Renderer As New IronPdf.ChromePdfRenderer()
Renderer.RenderingOptions.HtmlHeader = New HtmlHeaderFooter() With {
	.Height = 20,
	.HtmlFragment = "<img src='logo.png'>",
	.BaseUrl = (New Uri("C:\assets\images\")).AbsoluteUri
}

HTML file to PDF with CSS, JS and Image Assets

When rendering an HTML file to PDF, all assets will be assumed local to that file.

 var Renderer = new IronPdf.ChromePdfRenderer();
 using var PDF = Renderer.RenderHTMLFileAsPdf("C:\\Assets\\TestInvoice1.html");
 PDF.SaveAs("Invoice.pdf");

 var Renderer = new IronPdf.ChromePdfRenderer();
 using var PDF = Renderer.RenderHTMLFileAsPdf("C:\\Assets\\TestInvoice1.html");
 PDF.SaveAs("Invoice.pdf");

Dim Renderer = New IronPdf.ChromePdfRenderer()
 Dim PDF = Renderer.RenderHTMLFileAsPdf("C:\Assets\TestInvoice1.html")
 PDF.SaveAs("Invoice.pdf")

In the above example, all JS, CSS and image files will be loaded from the C:\Assets folder on the disk - the same directory that the HTML file is located.

For convenience, you may use ChromePdfRenderOptions.CustomCssUrl to specify an additional stylesheet that is only used for .NET PDF rendering if you so desire. For example:

ChromePdfRenderer renderer = new ChromePdfRenderer();

renderer.RenderingOptions.CustomCssUrl = "./style.css";

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");
pdf.SaveAs("tryCss.pdf");

ChromePdfRenderer renderer = new ChromePdfRenderer();

renderer.RenderingOptions.CustomCssUrl = "./style.css";

PdfDocument pdf = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>");
pdf.SaveAs("tryCss.pdf");

Dim renderer As New ChromePdfRenderer()

renderer.RenderingOptions.CustomCssUrl = "./style.css"

Dim pdf As PdfDocument = renderer.RenderHtmlAsPdf("<h1>Hello World</h1>")
pdf.SaveAs("tryCss.pdf")

Please note

• The ChromePdfRenderOptions.CustomCssUrl property is currently only functional when rendering from an HTML string to a PDF document using the RenderHtmlAsPdf method.