## Versions

```
$ node-html-to-image-cli --version
1.1.0
```

macOS: v11.6
Apple M1 chip

## HTML

I have the following index.html.

```
 

@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");
html {
position: relative;
height: 100%;
}

body {
padding:0;
margin:0;
font-family: "Luckiest Guy";
}
.center{
display: flex;
justify-content: center;
align-items: center;
height:1080px;
}

h1 {
font-size: 240px;
background-image: url(/Users/shinichiokada/Bash_Projects/Cliptext/cliptext/flower.jpg);
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
padding: 0 50px;
text-align:center;
}

It's Friday!

```

## Terminal

Running node-html-to-image:

```
$ npx node-html-to-image-cli ./index.html test2.png
▶ start node-html-to-image-cli v1.1.0
✔ success Image successfully created!
```

## Results

When I open the index.html, it renders what I want.
But the image created has nothing in it.

## Cause

I think the CSS `color:transparent;` breaks it. It prints text without it but it is not what I want.