Creating Image Container for Typed.Js Content

[PrayersNApples]

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.

http://littleoneslittlewords.com/

[PrayersNApples]

I'm thinking an image like: http://littleoneslittlewords.com/wp-content/uploads/2017/04/Sample-Text-Container.jpg would probably work best to replicate the effect achieved by: http://www.stephanemartinw.com/ but, again: I'm not sure if I'm on the right track with the above code (and just need to manually play around with image position/size + making it mobile responsive) or if a different route makes more sense.

[James Chai]

What your trying to achieve can be done but requires quite a bit of tweaking.

Also the example you provide is built using Drupal, functions just a bit differently than WordPress.

---

Marketing, Sales and WordPress Growth Hacking http://www.smbpress.com

[PrayersNApples]

@jchai: Am I headed in the right direction with the current code or do you think there's a better way to go about this? (If the current code is a strong start: is my next step trying to make it mobile responsive?)

[James Chai]

Using the code we came up with above try playing around with the 'Media Queries' settings.

You may consider uploading smaller background images to accommodate smaller screen sizes and the other settings you decrease.

---

Marketing, Sales and WordPress Growth Hacking http://www.smbpress.com

[Author]

Posts