SOLVED

Re: Guided landing page with dynamic background image

Go to solution
Mike_St_Louis
Level 2

Re: Guided landing page with dynamic background image

I'm trying my best to logically think this through, but I have a background image in a <div> that needs to be dynamic based on the segment option in the URL, but I don't see how this will work if the style="background-image:url('https://www.example.com/image.jpg')" needs to be image1.jpg, image2.jpg, etc. The <div> is a parent <div> and has other child <divs> within it with MKTO dynamic classes, and that parent div has an existing class.

SanfordWhiteman
Level 10 - Community Moderator

Re: Guided landing page with dynamic background image

Are you saying you want the literal value of the query param (whatever it is, and you won't know ahead of time) needs to become the background image URL?

Mike_St_Louis
Level 2

Re: Guided landing page with dynamic background image

No - we will have three dynamic versions of the landing page based on what industry we add to the segment in the URL, so for example if the URL is https://pages.company.com/page1?seg=cars -- that background image in the div needs to be of cars, and if a visitor was to come in via https://pages.company.com/page1?seg=boats -- that same div background would need to be of boats, etc.

SanfordWhiteman
Level 10 - Community Moderator

Re: Guided landing page with dynamic background image

So that's exactly the same as in my blog post.

You have three different CSS stylesheets.

A <div> that includes a <link> inside it it is segmented. It loads a different stylesheet for each segment.

Mike_St_Louis
Level 2

Re: Guided landing page with dynamic background image

Well that is what I was trying to avoid, the stylesheet is rather long and is just asking for something to be screwed up. Thanks, but not sure it's going to work as well/seamlessly as we need it to.

SanfordWhiteman
Level 10 - Community Moderator

Re: Guided landing page with dynamic background image

One tiny stylesheet with 3 segmented variants, Mike. Or just an inline <style>, works the same way. I think you're going to have an "A-ha" moment soon...