Making bg heroImg responsive | Community
Skip to main content
A
Anonymous
January 2, 2018
Question

Making bg heroImg responsive

  • January 2, 2018
  • 2 replies
  • 2881 views

Hey guys,

I'm trying to get my hero image for my landing page to be responsive. But it just refuses to stretch to my desktop monitor size.

Link - global.curvature.com/01---APAC-2017-Email-Reports_test.html

.section-background-image {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.section-background-image img {

position: absolute;

min-width: 100%;

max-width: none;

min-height: 100%;

top: 0;

left: 0;

Even when i change to position: relative;, it doesn't work.

Thanks in advance!

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

2 replies

Gerard_Donnell4
Gerard_Donnell4
Level 9
January 2, 2018

Hi Amelia Low​,

There is a random style on line 218 of your html which has a display:inline-block; which is causing issues.

This isnt perfect code by a long shot, I didn't have time to fully investigate the issue but if you replace the div containing the background image with the following code it should work. 

Try this style instead:

<div class="mktoImg mktoGen" id="mkto_gen_heroImg" style="background: url(/rs/370-TGX-095/images/Data-storage-1600x1066.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; opacity:0.2; display:block;">

<img class="lpimg" id="heroImg" mktoname="Hero BG Image(1600x1066)" src="/rs/370-TGX-095/images/Data-storage-1600x1066.jpg" style="opacity:0">

</div>

Thanks,

Gerard

Gerard_Donnell4
Gerard_Donnell4
Level 9
January 2, 2018

Video Link : 2209

Here is a quick demo of it working on my 27in monitor.

A
Anonymous
January 3, 2018

Appreciate the help, Gerard.

Its showing great on my preview but when i tried to save the template, marketo popped out an error "Element must have Mktoname attribute". When i added the MktoName attribute, the image will not show. Can you help me out?

This is my original html code below: Think you're seeing mktoimg mktogen (img class/ id) in the page source view because of the style css? Will the difference of naming the div class/img class/id affect the codes?

<!-- HERO

      ================================= -->

      <section id="hero" class="hero-section hero-layout-classic hero-layout-features-and-form section section-dark">

       <div class="section-background">

  <!-- IMAGE BACKGROUND -->

            <img class='mktoImg' id='heroImg' mktoName="Hero BG Image(1600x1066)" src='global.curvature.com/rs/370-TGX-095/images/Data-storage-1600x1066.jpg' style='opacity:0.2'>

</div>

Thanks so much!

Amelia

Terms & ConditionsAccessibility statement

Loading footer...