Making bg heroImg responsive

Highlighted
Anonymous
Not applicable

Making bg heroImg responsive

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 - https://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!

3 REPLIES 3
Highlighted

Re: Making bg heroImg responsive

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

Highlighted

Re: Making bg heroImg responsive

Video Link : 2209

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

Highlighted
Anonymous
Not applicable

Re: Making bg heroImg responsive

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='https://global.curvature.com/rs/370-TGX-095/images/Data-storage-1600x1066.jpg' style='opacity:0.2'>

</div>

Thanks so much!

Amelia