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

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems