• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Creating Image Container for Typed.Js Content

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Creating Image Container for Typed.Js Content

This topic is: not resolved

Tagged: background image, centric pro, genesis, Image Container, text widget, Typed.js

  • This topic has 4 replies, 2 voices, and was last updated 8 years, 2 months ago by James Chai.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 13, 2017 at 7:39 pm #204763
    PrayersNApples
    Member

    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/
    April 14, 2017 at 5:38 am #204773
    PrayersNApples
    Member

    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.

    April 14, 2017 at 6:30 am #204783
    James Chai
    Member

    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

    April 14, 2017 at 2:44 pm #204798
    PrayersNApples
    Member

    @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?)

    April 15, 2017 at 6:47 am #204818
    James Chai
    Member

    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
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble