Placing Typed.Js on Background Image

Replies: 0

I would like to recreate the effect of typing (with typed.js) on a typewriter (a background image), identical to the effect achieved at:

http://www.stephanemartinw.com/

The closest I’ve come is with:

.home-featured .home-widgets-1 {
    display: inline-block;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    padding: 200px 0;
    font-size: 20px;
    background: url(
http://littleoneslittlewords.com/wp-content/uploads/2017/04/Sample.jpg) no-repeat;
    width: 1000px;
}

But the image is not mobile responsive (I need it to re-size exactly with the text) and the two items (text and image) are still separate – I need to figure out a way to configure this so the text takes places EXACTLY within a designated area (i.e., the paper on the typewriter).

I’m not sure what image to upload because I don’t know exactly where it needs to go; however, this seems like the simplest of my problems at this point!

Any help would be greatly appreciated!

Thank you!

My website is: http://littleoneslittlewords.com/
I’m building on Genesis using the Centric Pro theme.