Full Width Image spanning Landing Page

[Anonymous]

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-conv...

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

[Casey_Grimes]

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.

[Anonymous]

Thank you very much, Courtney!

[Justin_Cooperm2]

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!