I would like to recreate the effect of typing (with typed.js) on a typewriter (a background image), identical to the effect achieved at:
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/