Responsive Div to Display Content with a Responsive Background Image

So, I wanted to be able to display a responsive image that dynamically displays content depending on the winner of a contest. I have an image called 'Winner of the Week' where a post is displayed congratulating the Winner of a Weekly contest.

I'm using the shortcodes ultimate plugin to display the most recent post tagged "Winner of the Week" within a div that is styled to be centered with a cool background image. It presented a couple of coding challenges that I wanted to share solutions for.

First, I needed the background image to be responsive (as the div resized the background image was not resizing and so not all of the image was displaying). I found a solution to that on stack overflow here. The image below is the CSS code I needed:

Second, I needed the content inside the post to remain within the background image. For this I needed the div containing both the post and the background image to maintain a constant aspect ratio. I was able to find a solution for this on stack overflow as well. This one involves using two divs (one position: relative; and one position: absolute;) with a combination of width and padding-bottom (as a percentage) to create a fixed aspect ratio. The thread has more details here and there's also a link to a demo so you can watch it in action here.

If you'd like to see how I got this all to come together, you can visit the fiddle where I've shared the code here. To see my code in action, click on the photo below:

Custom Post Types UI and Advanced Custom Fields Plugins

https://wordpress.org/support/view/plugin-reviews/custom-post-type-ui
Plugin for creating custom post types with a simple User Interface

https://wordpress.org/plugins/advanced-custom-fields
Plugin for creating advanced custom fields

part 1 of the series on custom post types discusses how to use the custom post types plugin to create custom posts with custom fields. This video covers the options that you have for including in your custom post

Among many options, the Custom Post Type UI plugin can create post types that support the following:

• Title
• Editor
• Excerpt
• Trackbacks
• Custom Fields
• Comments
• Revisions
• Featured Image
• Author
• Page Attributes
• Post Formats

Once you create the post type, it will appear in the wp admin menu bar on the left side of your screen! After you create the post type, you can use this plugin to create a custom taxonomy that is either hierarchical (for category-like behavior) or not hierarchical (for tag-like behavior).

Once you have created the Custom Post Type, you can use the Advanced Custom Fields Plugin to add custom fields to your custom post type. You do this by Adding a new field group. This plugin is extremely powerful and an excellent counterpart to the Custom Post Types UI plugin.

The field types you can create with this plugin are:

• Text (type text, api returns text)
• Text Area (type text, api returns text with
  tags)
• Number (type number, api returns integer)
• Email (type email, api returns text)
• Password (type password, api returns text)
• WYSIWYG (a wordpress wysiwyg editor, api returns html)
• Image (upload an image, api returns the url)
• File (upload a file, api returns the url)
• Select (drop down list of choices, api returns chosen item)
• Checkbox (tickbox list of choices, api returns array of choices)
• Radio Buttons ( radio button list of choices, api returns chosen item)
• True / False (tick box with message, api returns true or false)
• Page Link (select 1 or more page, post or custom post types, api returns the selected url)
• Post Object (select 1 or more page, post or custom post types, api returns the selected post objects)
• Relationship (search, select and order post objects with a tidy interface, api returns the selected post objects)
• Taxonomy (select taxonomy terms with options to load, display and save, api returns the selected term objects)
• User (select 1 or more WP users, api returns the selected user objects)
• Google Maps (interactive map, api returns lat,lng,address data)
• Date Picker (jquery date picker, options for format, api returns string)
• Color Picker (WP color swatch picker)
• Tab (Group fields into tabs)
• Message (Render custom messages into the fields)
• Repeater (ability to create repeatable blocks of fields!)
• Flexible Content (ability to create flexible blocks of fields!)
• Gallery (Add, edit and order multiple images in 1 simple field)
• Custom (Create your own field type!)

part 2 of the series on custom post types

part 3 of the series on custom post types