• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Responsive Text Over Image

This code makes the font size responsive so the text size increases and decreases when the size of the browser window changes without the addition of CSS for media queries.

The code enables you to add a image with text overlay. You can position the image using any Genesis hook and display it on specific pages using conditional tags.

By default, the image is hooked after the header on single posts. The featured image is displayed if added otherwise a backup image named backup.jpg is pulled from your child themes images folder, if one added.

The solution includes CSS rules for positioning the text (1) at the bottom of the image or (2) centered as you can see in the following demo video.

Video Demo

Shows the featured image displayed after the header on single posts with responsive text. When no image added, it shows a backup image from the same responsive text.

Register or login to access the code :

Register for full access

Related Tutorials

  • Responsive Custom Text Over Featured Image After Header

After Header Image Featured Image

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.