Can I overlay a subscription form on an image? (5 posts)

  1. linbmcd
    Posted 1 year ago #

    I am trying to create a landing page that looks something like this:
    Free Report Landing Page

    I am using ActiveCampaign for an automated series, and have a shortcode for the subscription sign up form. I'd like to be able to have a background image on the landing page and "overlay" the form on that image.

    Can this be done?


    Awakened Lives

  2. CrouchingBruin
    Posted 1 year ago #

    Should be pretty easy. Just create your landing page and add the shortcode for the contact form, then add a CSS rule in the Custom CSS field of Parabola's Miscellaneous Settings page which sets the background-image property of the page's content DIV. One thing to consider is if you want the sidebar to appear on the page or if you want to hide the sidebar and have the content stretch across the entire page width.

  3. linbmcd
    Posted 1 year ago #

    Thanks CrouchingBruin, I appreciate the info

    I am unfortunately very deficient when it comes to CSS knowledge, and therefore clueless about what a CSS rule "to set the background-image property of the page's content DIV" would look like (although I do know where the Custom CSS field in Parabola's Miscellaneous Settings page is because I have taken some CSS advice from other's that was - fortunately - very detailed :).

    As far as the sidebar goes, I can set each page's parameters (layout), so I do have the page set so there are not sidebars.

  4. CrouchingBruin
    Posted 1 year ago #

    OK, here's some background info:

    Every time you create a page or post, WordPress assigns a unique, numeric ID to it called the Post ID. You can see what the Post ID is by going to the page editor and editing a specific page. If you were to edit the About Lin page, for example, up in the address bar you should see a portion of the address that looks like post=313.

    For properly developed themes, the Post ID is also assigned to different web elements on the page, either via a class name or an ID. If you view the source of the About Lin page using your browser, you'll see that the <body> tag has a class of page-id-313.

    What this means is you can target CSS to act only on the elements of a specific page by adding whatever class or ID is being used to the front of the selector. So let's say you create a Landing page, and you see that it has an ID of 456. One of the containers which holds the main content area has an ID of content, so to set the background of that area, you would add these CSS rules:

    body.page-id-456 #content {
       background: transparent url(http://www.awakenedlives.com/images/background.jpg) no-repeat;
    #post-456 {
       background: transparent;

    So you would change 456 to the Post ID of the page that you want as your Landing page.

    The first rule sets background of the DIV with an ID of content, but only for the page which has an ID of 456. You should set the value for url to point to the image that you want to use as the background. Since the content container is 810px wide, you probably want to use an image that is at least that wide.

    The second rule sets the background of a container that displays the post content which is located within the content container. It currently has its background property set to white, so you need this rule in order to make it transparent so that the background image of the content container shows through.

  5. linbmcd
    Posted 1 year ago #

    Wow, CrouchingBruin, what can I say but thank you for your generosity in providing such a detailed roadmap for me. I will take the time to work through this thoroughly, and I'm sure that any small CSS obstacles I run across I can figure out on my own.

    Thank you again.


Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.