3 Replies Latest reply on Jan 2, 2018 6:54 PM by Amelia Low

    Making bg heroImg responsive

    Amelia Low

      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!

        • Re: Making bg heroImg responsive
          Gerard Donnelly

          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

          1 of 1 people found this helpful
          • Re: Making bg heroImg responsive
            Gerard Donnelly

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

            1 of 1 people found this helpful
              • Re: Making bg heroImg responsive
                Amelia Low

                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