Full Width Image spanning Landing Page | Community
Skip to main content
A
Anonymous
August 6, 2015
Question

Full Width Image spanning Landing Page

  • August 6, 2015
  • 1 reply
  • 3595 views

I'm at a loss.  I'm creating a new landing page and want my image to span the width of the page, but instead, I'm seeing white on the edges.  How do I ensure the image takes up the entire page, width and length?  Similar to the ESPN example on this page: http://unbounce.com/landing-page-examples/20-landing-page-designs-get-picked-apart-analyzed-for-conversion/

This is my page now: info.metroaviation.com/QuoteRequest.html

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

1 reply

Casey_Grimes2
Casey_Grimes2
Level 10
August 7, 2015

Hi Kristen,

So, several things are at play here.

1. It looks like you built this landing page with free-form landing page templates and the image is placed as an element on that page; to achieve the look of the ESPN page, you actually need to define this with CSS on your template.

2. That being said, you actually have the width of the page body manually defined rather than at 100%; on my (relatively small) 1680x1050 monitor there's already white space. You're going to be looking for applying the background image on the body tag, width:100%; min-height:100%; background-size:cover.

3. That background image is both huge in file size and small in area! You generally want to stick with PNG for items drawn on a computer and JPG for photos compression-wise. There's no need for a background image to be over 1MB in size.

    A
    Anonymous
    January 6, 2016

    Thank you very much, Courtney!

    Justin_Cooperm2
    Justin_Cooperm2
    Level 10
    January 6, 2016

    Takehiro Masaki​ had some good findings:

    Trying to add an image as a background on my landing page

    He also created an idea to make doing this easier. Vote on it!

    Terms & ConditionsAccessibility statement

    Loading footer...