background image loss size style #2918

[yooyea]

You are using the latest version You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console Bug reports: foreignObject option is false

As background image using background-image: url(‘imageURl’)

BackgroundImage loss size style.

The logo element width and height use css variable

example：

Specifications: html2canvas version tested with: 1.4.1 Browser & version: chrome 102 Operating system: windows 10 Pro

[yooyea]

imageURL

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4yLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNjUuNSA5OS4xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNjUuNSA5OS4xOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojRkZGRkZGO30NCgkuc3Qxe2ZpbGw6IzFCNzNFRTt9DQo8L3N0eWxlPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1LjUsMTAuOWMtMC4yLTItMS4yLTMuNi0yLjktNC44Yy0xLjctMS4xLTMuOC0xLjctNi4zLTEuN2MtMS44LDAtMy40LDAuMy00LjgsMC45Yy0xLjQsMC42LTIuNCwxLjQtMy4yLDIuNA0KCQlTNy4yLDEwLDcuMiwxMS4zYzAsMS4xLDAuMywyLDAuOCwyLjhjMC41LDAuOCwxLjIsMS40LDIsMmMwLjgsMC41LDEuNywwLjksMi42LDEuM2MwLjksMC4zLDEuOCwwLjYsMi41LDAuOGw0LjIsMS4xDQoJCWMxLjEsMC4zLDIuMywwLjcsMy42LDEuMmMxLjMsMC41LDIuNiwxLjIsMy44LDJzMi4yLDEuOSwzLDMuM3MxLjIsMywxLjIsNC45YzAsMi4yLTAuNiw0LjItMS43LDZjLTEuMiwxLjgtMi45LDMuMi01LjEsNC4zDQoJCWMtMi4yLDEuMS00LjksMS42LTguMSwxLjZjLTMsMC01LjUtMC41LTcuNy0xLjRjLTIuMi0xLTMuOC0yLjMtNS4xLTRjLTEuMi0xLjctMS45LTMuNy0yLjEtNS45aDUuMkM2LjUsMzIuNyw3LDM0LDcuOSwzNQ0KCQljMC45LDEsMi4xLDEuOCwzLjUsMi4zYzEuNCwwLjUsMi45LDAuNyw0LjYsMC43YzEuOSwwLDMuNi0wLjMsNS4xLTAuOXMyLjctMS41LDMuNi0yLjZjMC45LTEuMSwxLjMtMi40LDEuMy0zLjkNCgkJYzAtMS40LTAuNC0yLjUtMS4xLTMuM2MtMC44LTAuOS0xLjgtMS42LTMtMi4xcy0yLjYtMS00LTEuNGwtNS4xLTEuNWMtMy4yLTAuOS01LjgtMi4yLTcuNy00Yy0xLjktMS43LTIuOC00LTIuOC02LjcNCgkJYzAtMi4zLDAuNi00LjMsMS45LTZzMi45LTMuMSw1LjEtNFMxMy44LDAsMTYuNCwwYzIuNywwLDUsMC41LDcuMSwxLjRzMy43LDIuMiw0LjksMy45czEuOSwzLjUsMS45LDUuNkgyNS41eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00Ny42LDQyLjVjLTIsMC0zLjctMC40LTUuMy0xLjFjLTEuNi0wLjctMi45LTEuOC0zLjgtMy4yUzM3LDM1LDM3LDMzYzAtMS44LDAuMy0zLjIsMS00LjNzMS42LTIsMi44LTIuNg0KCQljMS4yLTAuNiwyLjUtMS4xLDMuOS0xLjRzMi44LTAuNiw0LjMtMC44YzEuOS0wLjIsMy40LTAuNCw0LjYtMC42YzEuMi0wLjEsMi0wLjMsMi42LTAuN3MwLjgtMC44LDAuOC0xLjZ2LTAuMg0KCQljMC0yLTAuNS0zLjUtMS42LTQuNmMtMS4xLTEuMS0yLjctMS43LTQuOS0xLjdjLTIuMywwLTQsMC41LTUuMywxLjVjLTEuMywxLTIuMiwyLjEtMi43LDMuMmwtNC41LTEuNmMwLjgtMS45LDEuOS0zLjMsMy4yLTQuNA0KCQlzMi44LTEuOCw0LjQtMi4yczMuMi0wLjYsNC43LTAuNmMxLDAsMi4xLDAuMSwzLjQsMC40YzEuMywwLjIsMi42LDAuNywzLjgsMS40YzEuMiwwLjcsMi4yLDEuOCwzLDMuM2MwLjgsMS41LDEuMiwzLjQsMS4yLDUuOQ0KCQl2MjAuNEg1N3YtNC4yaC0wLjJjLTAuMywwLjctMC45LDEuNC0xLjYsMi4yYy0wLjgsMC44LTEuOCwxLjQtMywyQzUwLjksNDIuMyw0OS40LDQyLjUsNDcuNiw0Mi41eiBNNDguMywzOC4zDQoJCWMxLjksMCwzLjUtMC40LDQuOC0xLjFjMS4zLTAuNywyLjMtMS43LDIuOS0yLjljMC43LTEuMiwxLTIuNCwxLTMuN3YtNC4zYy0wLjIsMC4yLTAuNiwwLjUtMS4zLDAuN2MtMC43LDAuMi0xLjUsMC40LTIuMywwLjUNCgkJcy0xLjcsMC4zLTIuNiwwLjRjLTAuOCwwLjEtMS41LDAuMi0yLDAuM2MtMS4yLDAuMi0yLjQsMC40LTMuNSwwLjhjLTEuMSwwLjQtMS45LDAuOS0yLjYsMS42cy0xLDEuNy0xLDIuOWMwLDEuNywwLjYsMi45LDEuOCwzLjcNCgkJQzQ0LjksMzcuOCw0Ni40LDM4LjMsNDguMywzOC4zeiIvPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03NCwxMC45bDcuNCwxMi42bDcuNC0xMi42aDUuNWwtMTAsMTUuNWwxMCwxNS41aC01LjVsLTcuNC0xMmwtNy40LDEyaC01LjVsOS44LTE1LjVsLTkuOC0xNS41SDc0eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMTIuMyw0Mi40Yy0yLjgsMC01LjItMC43LTcuMy0yYy0yLjEtMS4zLTMuNy0zLjItNC45LTUuNmMtMS4yLTIuNC0xLjgtNS4yLTEuOC04LjRjMC0zLjIsMC42LTYsMS44LTguNA0KCQljMS4yLTIuNCwyLjgtNC4zLDQuOS01LjZjMi4xLTEuMyw0LjUtMiw3LjMtMnM1LjIsMC43LDcuMywyYzIuMSwxLjMsMy43LDMuMiw0LjksNS42YzEuMiwyLjQsMS44LDUuMiwxLjgsOC40YzAsMy4yLTAuNiw2LTEuOCw4LjQNCgkJYy0xLjIsMi40LTIuOCw0LjItNC45LDUuNkMxMTcuNiw0MS44LDExNS4xLDQyLjQsMTEyLjMsNDIuNHogTTExMi4zLDM4LjJjMi4xLDAsMy45LTAuNSw1LjItMS42YzEuNC0xLjEsMi40LTIuNSwzLTQuMw0KCQlzMS0zLjcsMS01LjhjMC0yLjEtMC4zLTQtMS01LjhjLTAuNy0xLjgtMS43LTMuMi0zLTQuM2MtMS40LTEuMS0zLjEtMS43LTUuMi0xLjdzLTMuOSwwLjYtNS4yLDEuN3MtMi40LDIuNS0zLDQuMw0KCQljLTAuNywxLjgtMSwzLjctMSw1LjhjMCwyLjEsMC4zLDQsMSw1LjhzMS43LDMuMiwzLDQuM1MxMTAuMiwzOC4yLDExMi4zLDM4LjJ6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTAsNjQuNHYtNy4yaDMzLjl2Ny4ySDIxLjJ2MzRoLTguNnYtMzRIMHoiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMzYuMSw5OC41VjY3LjZoOC4zVjczaDAuM2MwLjYtMS45LDEuNS0zLjQsMi44LTQuNGMxLjMtMSwyLjktMS41LDQuNi0xLjVjMC40LDAsMC45LDAsMS40LDAuMQ0KCQlzMC45LDAuMSwxLjMsMC4yVjc1Yy0wLjQtMC4xLTEtMC4yLTEuNy0wLjNjLTAuNy0wLjEtMS40LTAuMS0yLTAuMWMtMS4zLDAtMi40LDAuMy0zLjQsMC44Yy0xLDAuNS0xLjgsMS4zLTIuMywyLjMNCgkJYy0wLjYsMS0wLjksMi4xLTAuOSwzLjN2MTcuNUgzNi4xeiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik02Ny4yLDk5LjFjLTIsMC0zLjctMC4zLTUuMy0xYy0xLjUtMC43LTIuOC0xLjctMy43LTMuMXMtMS4zLTMuMS0xLjMtNS4xYzAtMS43LDAuMy0zLjIsMC45LTQuMw0KCQlzMS41LTIuMSwyLjYtMi44YzEuMS0wLjcsMi4zLTEuMiwzLjctMS42czIuOC0wLjYsNC40LTAuOGMxLjgtMC4yLDMuMi0wLjQsNC4zLTAuNXMxLjktMC40LDIuNC0wLjhjMC41LTAuMywwLjctMC44LDAuNy0xLjV2LTAuMQ0KCQljMC0xLjMtMC40LTIuMy0xLjItM3MtMS45LTEtMy40LTFjLTEuNSwwLTIuOCwwLjMtMy43LDFDNjYuOSw3NS4xLDY2LjMsNzYsNjYsNzdMNTgsNzYuM2MwLjQtMS45LDEuMi0zLjUsMi40LTQuOQ0KCQljMS4yLTEuNCwyLjctMi40LDQuNi0zLjJjMS45LTAuNyw0LTEuMSw2LjUtMS4xYzEuNywwLDMuNCwwLjIsNC45LDAuNnMzLDEsNC4yLDEuOXMyLjIsMS45LDIuOSwzLjNjMC43LDEuMywxLjEsMi45LDEuMSw0Ljd2MjAuOQ0KCQloLTguMXYtNC4zaC0wLjJjLTAuNSwxLTEuMiwxLjgtMiwyLjVzLTEuOCwxLjMtMywxLjdDNzAuMSw5OC45LDY4LjcsOTkuMSw2Ny4yLDk5LjF6IE02OS43LDkzLjJjMS4zLDAsMi40LTAuMywzLjMtMC44DQoJCXMxLjctMS4yLDIuMy0yYzAuNS0wLjksMC44LTEuOCwwLjgtMi45di0zLjNjLTAuMywwLjItMC42LDAuMy0xLjEsMC41Yy0wLjUsMC4xLTEsMC4zLTEuNiwwLjRjLTAuNiwwLjEtMS4yLDAuMi0xLjcsMC4zDQoJCWMtMC42LDAuMS0xLjEsMC4yLTEuNiwwLjJjLTEsMC4xLTEuOSwwLjQtMi42LDAuN3MtMS4zLDAuOC0xLjgsMS4zYy0wLjQsMC41LTAuNiwxLjItMC42LDJjMCwxLjIsMC40LDIuMSwxLjMsMi43DQoJCUM2Ny4zLDkyLjgsNjguMyw5My4yLDY5LjcsOTMuMnoiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTAyLjcsOTljLTIuMywwLTQuNS0wLjYtNi40LTEuOGMtMS45LTEuMi0zLjQtMy00LjUtNS40Yy0xLjEtMi40LTEuNy01LjMtMS43LTguN2MwLTMuNSwwLjYtNi41LDEuNy04LjgNCgkJczIuNy00LjEsNC42LTUuM2MxLjktMS4yLDQtMS44LDYuMy0xLjhjMS43LDAsMy4yLDAuMyw0LjMsMC45czIuMSwxLjMsMi44LDIuMmMwLjcsMC45LDEuMywxLjcsMS42LDIuNWgwLjNWNTcuM2g4LjZ2NDEuMmgtOC41di01DQoJCWgtMC40Yy0wLjQsMC45LTEsMS43LTEuNywyLjVjLTAuNywwLjgtMS43LDEuNS0yLjgsMi4xQzEwNS44LDk4LjcsMTA0LjMsOTksMTAyLjcsOTl6IE0xMDUuNCw5Mi4yYzEuNCwwLDIuNi0wLjQsMy41LTEuMQ0KCQljMS0wLjgsMS43LTEuOCwyLjItMy4yYzAuNS0xLjQsMC44LTMsMC44LTQuOGMwLTEuOC0wLjMtMy40LTAuOC00LjhjLTAuNS0xLjQtMS4yLTIuNC0yLjItMy4xcy0yLjEtMS4xLTMuNS0xLjENCgkJYy0xLjQsMC0yLjYsMC40LTMuNiwxLjFjLTEsMC44LTEuNywxLjgtMi4yLDMuMmMtMC41LDEuNC0wLjcsMi45LTAuNyw0LjdjMCwxLjgsMC4zLDMuNCwwLjgsNC44YzAuNSwxLjQsMS4yLDIuNCwyLjIsMy4yDQoJCUMxMDIuOCw5MS44LDEwNCw5Mi4yLDEwNS40LDkyLjJ6Ii8+DQoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTE0MS40LDk5LjFjLTMuMiwwLTUuOS0wLjYtOC4yLTEuOWMtMi4zLTEuMy00LTMuMS01LjMtNS41Yy0xLjItMi40LTEuOS01LjItMS45LTguNWMwLTMuMiwwLjYtNiwxLjktOC40DQoJCWMxLjItMi40LDMtNC4zLDUuMi01LjZjMi4yLTEuMyw0LjktMiw3LjktMmMyLDAsMy45LDAuMyw1LjcsMWMxLjgsMC43LDMuMywxLjYsNC42LDIuOXMyLjQsMi45LDMuMSw0LjljMC43LDIsMS4xLDQuMywxLjEsNi45djIuNA0KCQloLTI2LjF2LTUuM2gxOGMwLTEuMi0wLjMtMi4zLTAuOC0zLjNzLTEuMy0xLjctMi4yLTIuMmMtMC45LTAuNS0yLTAuOC0zLjMtMC44Yy0xLjMsMC0yLjUsMC4zLTMuNSwwLjljLTEsMC42LTEuOCwxLjQtMi4zLDIuNA0KCQljLTAuNiwxLTAuOSwyLjEtMC45LDMuM3Y1LjFjMCwxLjUsMC4zLDIuOSwwLjksNGMwLjYsMS4xLDEuNCwyLDIuNCwyLjZjMSwwLjYsMi4zLDAuOSwzLjcsMC45YzEsMCwxLjgtMC4xLDIuNi0wLjQNCgkJYzAuOC0wLjMsMS41LTAuNywyLTEuMmMwLjYtMC41LDEtMS4yLDEuMy0ybDcuOSwwLjVjLTAuNCwxLjktMS4yLDMuNi0yLjUsNXMtMi44LDIuNS00LjgsMy4zQzE0Ni4yLDk4LjcsMTQzLjksOTkuMSwxNDEuNCw5OS4xeiINCgkJLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTYxLjIsOTguNVY2Ny42aDguM1Y3M2gwLjNjMC42LTEuOSwxLjUtMy40LDIuOC00LjRjMS4zLTEsMi45LTEuNSw0LjYtMS41YzAuNCwwLDAuOSwwLDEuNCwwLjENCgkJYzAuNSwwLjEsMC45LDAuMSwxLjMsMC4yVjc1Yy0wLjQtMC4xLTEtMC4yLTEuNy0wLjNjLTAuNy0wLjEtMS40LTAuMS0yLTAuMWMtMS4zLDAtMi40LDAuMy0zLjQsMC44Yy0xLDAuNS0xLjgsMS4zLTIuMywyLjMNCgkJYy0wLjYsMS0wLjksMi4xLTAuOSwzLjN2MTcuNUgxNjEuMnoiLz4NCgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNMjExLjksNzAuNmMtMC4zLTEtMC43LTEuOC0xLjItMi42Yy0wLjUtMC44LTEuMS0xLjQtMS45LTEuOXMtMS42LTAuOS0yLjUtMS4yYy0wLjktMC4zLTItMC40LTMuMS0wLjQNCgkJYy0yLjEsMC00LDAuNS01LjUsMS42Yy0xLjYsMS0yLjgsMi42LTMuNyw0LjZjLTAuOSwyLTEuMyw0LjQtMS4zLDcuM3MwLjQsNS4zLDEuMyw3LjNjMC45LDIsMi4xLDMuNSwzLjcsNC42DQoJCWMxLjYsMS4xLDMuNSwxLjYsNS43LDEuNmMyLDAsMy43LTAuNCw1LjEtMS4xYzEuNC0wLjcsMi41LTEuNywzLjItM2MwLjctMS4zLDEuMS0yLjgsMS4xLTQuNmwxLjgsMC4zaC0xMC42di02LjZoMTcuM3Y1LjINCgkJYzAsMy42LTAuOCw2LjctMi4zLDkuM2MtMS41LDIuNi0zLjYsNC42LTYuMyw2cy01LjgsMi4xLTkuMiwyLjFjLTMuOSwwLTcuMy0wLjktMTAuMi0yLjZzLTUuMi00LjEtNi44LTcuMw0KCQljLTEuNi0zLjItMi40LTYuOS0yLjQtMTEuM2MwLTMuMywwLjUtNi4zLDEuNS04LjljMS0yLjYsMi4zLTQuOCw0LjEtNi43YzEuOC0xLjgsMy44LTMuMiw2LjEtNC4yYzIuMy0xLDQuOS0xLjQsNy42LTEuNA0KCQljMi4zLDAsNC41LDAuMyw2LjUsMWMyLDAuNywzLjgsMS42LDUuNCwyLjljMS42LDEuMiwyLjgsMi43LDMuOCw0LjRjMSwxLjcsMS42LDMuNiwxLjksNS42SDIxMS45eiIvPg0KCTxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yNjUuNSw3Ny45YzAsNC41LTAuOCw4LjMtMi41LDExLjVjLTEuNywzLjItNCw1LjYtNi45LDcuMmMtMi45LDEuNy02LjIsMi41LTkuOCwyLjVjLTMuNywwLTctMC44LTkuOS0yLjUNCgkJcy01LjItNC4xLTYuOS03LjJjLTEuNy0zLjItMi41LTctMi41LTExLjVjMC00LjUsMC44LTguMywyLjUtMTEuNXM0LTUuNiw2LjktNy4yYzIuOS0xLjcsNi4yLTIuNSw5LjktMi41YzMuNiwwLDYuOSwwLjgsOS44LDIuNQ0KCQljMi45LDEuNyw1LjIsNC4xLDYuOSw3LjJDMjY0LjcsNjkuNiwyNjUuNSw3My40LDI2NS41LDc3Ljl6IE0yNTYuNyw3Ny45YzAtMi45LTAuNC01LjQtMS4zLTcuNHMtMi4xLTMuNS0zLjctNC42DQoJCWMtMS42LTEtMy40LTEuNS01LjUtMS41Yy0yLjEsMC0zLjksMC41LTUuNSwxLjVjLTEuNiwxLTIuOCwyLjYtMy43LDQuNmMtMC45LDItMS4zLDQuNS0xLjMsNy40czAuNCw1LjQsMS4zLDcuNA0KCQljMC45LDIsMi4xLDMuNSwzLjcsNC41YzEuNiwxLDMuNCwxLjYsNS41LDEuNmMyLjEsMCwzLjktMC41LDUuNS0xLjZjMS42LTEsMi44LTIuNSwzLjctNC41UzI1Ni43LDgwLjgsMjU2LjcsNzcuOXoiLz4NCjwvZz4NCjwvc3ZnPg0K