It’s saturday today, and I found some time to work on some side projects.. This one is about generating PDF’s from HTML and.. I wanted to use a full-width background image that keeps the original ratio.
Usually, it’s background-size: cover; that solves this, but not in mPDF..
In mPDF we use background-image-resize
Really, that’s it. Instead of background-size: cover;, use
background-image-resize: 6;
or
background-image-resize: 3;
Make sure to keep background-size out though!
Note: the value 6 resizes the image without keeping aspect ratio, if you want to keep the aspect ratio, use 3 instead.
mPDF docs for background-image-resize:
0 – No resizing (default)
1 – Shrink-to-fit w (keep aspect ratio)
2 – Shrink-to-fit h (keep aspect ratio)
3 – Shrink-to-fit w and/or h (keep aspect ratio)
4 – Resize-to-fit w (keep aspect ratio)
5 – Resize-to-fit h (keep aspect ratio)
6 – Resize-to-fit w and h
Visit mPDF Docs
Worked perfectly