SOLVED

Marketo Template 2-B Background Image

Go to solution
Anonymous
Not applicable

Marketo Template 2-B Background Image

Hello all,

I am using template 2-B landing page. I noticed the background image does not scale on a mobile device due to the 100% background.

Anyone have a quick fix without coding? Or the only way is too code it.

Template 2-B - Marketo Docs - Product Docs

Thanks

1 ACCEPTED SOLUTION

Accepted Solutions
Justin_Cooperm2
Level 10

Re: Marketo Template 2-B Background Image

Yeah, you have to add the CSS yourself if you'd like to change that. I know that it was coded that way originally because it's the right behavior to ensure that the LP looks good regardless of what image you upload as the bg image. If you make the width: 100%; and remove/override the min-height style it may look good for your image but not for many others.

View solution in original post

4 REPLIES 4
Justin_Cooperm2
Level 10

Re: Marketo Template 2-B Background Image

Yeah, you have to add the CSS yourself if you'd like to change that. I know that it was coded that way originally because it's the right behavior to ensure that the LP looks good regardless of what image you upload as the bg image. If you make the width: 100%; and remove/override the min-height style it may look good for your image but not for many others.

Anonymous
Not applicable

Re: Marketo Template 2-B Background Image

Hey Justin, since that is controlled in the 'master' css at http://templates.marketo.net/template2/css/style.css, what's the best way to override the height? I tried including the code below via the template editor, but it didn't seem to work. Thanks!

.section-background-image img {

  position: absolute;

  min-width: 100%;

  max-width: none;

  max-height: 304px;

  top: 0;

  left: 0;

}

Justin_Cooperm2
Level 10

Re: Marketo Template 2-B Background Image

There are many ways to do it. It's just about the CSS specificity of the style you are adding. You can certainly remove the reference to style.css., download the file locally, modify it, then upload it somewhere and reference it on your page.

OR, probably easier, just throw !important on what you want to override the other style.

.section-background-image img {

  position: absolute !important;

  min-width: 100% !important;

  max-width: none !important;

  max-height: 304px !important;

  top: 0 !important;

  left: 0 !important;

}

Another option is to give your style even more specificity than .section-background-image img like .section-background-image .lpimg img

Anonymous
Not applicable

Re: Marketo Template 2-B Background Image

Hello Justin.

I was looking at the css and noticed the min-height. It is what you stated. Thank you. 🙂