Marketo Template 2-B Background Image

[Anonymous]

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

[Justin_Cooperm2 · Accepted solution]

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]

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]

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]

Hello Justin.

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