Marketo Template 2-B Background Image | Community
Skip to main content
A
Anonymous
February 1, 2016
Solved

Marketo Template 2-B Background Image

  • February 1, 2016
  • 2 replies
  • 2159 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Justin_Cooperm2

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.

2 replies

Justin_Cooperm2
Justin_Cooperm2Accepted solution
Level 10
February 1, 2016

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.

A
Anonymous
October 5, 2016

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
Justin_Cooperm2
Level 10
October 7, 2016

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

A
Anonymous
February 1, 2016

Hello Justin.

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

Terms & ConditionsAccessibility statement

Loading footer...