Unbounce Answers/FAQ/Page Builder - Pro Tips

How can I make a background image stretch/scale the full page or section?

Carter Gilchrist
posted this on March 24, 2011 02:02 PM

If you were wondering how to stretch out a background image so that it fills the whole page or section instead of tiling, read on!

  1. Assign an image as the background image for your page, or section, by clicking on the "Change" button in the "Background Properties" panel.
  2. Click on the "Stylesheets" button in the bottom left of the editor.
  3. Paste in the following:

  4. If you'd like to apply this to a page section instead, change #lp-pom-root to the ID of your page section.

That's it! Save and republish.

Please note, you will not see the scaling effect inside the editor. You should also bear in mind that there are different ways of scaling and positioning your background image. This example uses "cover" but you can read more about the background-size rule here.

Important: This trick relies on the user's browser having CSS3 support. All modern browsers support this, but it won't provide full compatibility with much older browsers.

 

Comments

User photo
Phil Herbert

Doesn't Work 

May 24, 2011 04:45 PM
User photo
Carter Gilchrist
Unbounce

Hey Phile, what browser are you using and what's the URL to your page? If you don't want to paste it publicly, email support@unbounce.com and just mention to fire the ticket over to me in your email.

May 24, 2011 04:50 PM
User photo
Ryan Kelly

I'm not understanding the background change.  I started with an existing template, so it makes me choose by page section.  Am I supposed to start with a blank template?

August 19, 2011 09:05 AM
User photo
Ryan Engley
Unbounce

Hey Ryan - you can start with a template or a blank page.  To select the actual background and not just the background of a page section, you need to click outside of the page section margins.  If you find that this is not working, select the adjacent page section and ensure that 'Stretch Background to Page Edges' is deselected.  You should then be able to click outside of its margins to select the general page and proceed with the background change.  If this is not working for you, just send me an email to support@unbounce.com and I can take a look.

August 19, 2011 10:13 AM
User photo
Jonathan Bechtel

Choosing the whole page and not a section is giving me a devil of a time too. I'm clicking all over the place and everything just takes me to the header, footer, banner, etc. I'm really being thrown for a loop here.

October 03, 2011 04:07 AM
User photo
Carter Gilchrist
Unbounce

Sorry about that Jonathan - we have a big fix for that usability issue coming out very soon, where the sidebar will have a persistant "Page Properties" tab to make it easier to select. If you're really stuck, you should find that reloading the page in the editor will default to having the Page Properties selected off the start.

October 04, 2011 12:04 PM
User photo
mike crump

I, also, found that my page sections were all set to be a colour, in my case white, so it just covered up the background image. Setting some to transparent revealed the image.

November 04, 2011 03:44 AM
User photo
Saptarshi Nath

If I use the above script, and set my picture up as a background (I am using everything I need on my page as a background image), then I can only see the part of the image that fits into the screen and cannot scroll down to see the rest of the page! :(  I want the imagine to be scaled to the width of the page and not static throughout, is there another option to use?

November 10, 2011 10:01 AM
User photo
Carter Gilchrist
Unbounce

Hi Saptarshi, I'm not 100% clear on what you're hoping to achieve, but it's likely possible using a different value than "cover" in the CSS I posted above. Check <a href="http://www.w3schools.com/cssref/playit.asp?filename=playcss_backgro... demonstration out</a> to see if one of the options solves your problem. You might want to try just replacing "cover" with "100%" which will scale the background image to the width of the page..

November 10, 2011 02:04 PM
User photo
Davide Varvello

Hi Carter,

 Is there a workaround for non css3 compatible browsers? (IE8, IE7, ...)

TIA

January 27, 2012 07:41 AM
User photo
Michael Johnson

Nice trick! It worked for me once I unchecked the stretch the background box at http://unbouncepages.com/cashflow/

May 15, 2012 09:03 PM
User photo
Rodrigo Ferreira

Very good, i'm try use Css a long time.

Thank you.

August 22, 2013 06:40 PM
User photo
Timur Shakirov

Thanks, Carter! 100% trick worked for me! :)

November 22, 2013 04:08 AM
User photo
Ozgul Berkan

Hi - I've an image that I'd like to put in the background which it doesn't fit. It's either not covering the full page or looks funny when I make "100% 100%" on the CSS settings.

Don't you have a specific image size requirement (e.g. 2560 x 1440) for the page background which would fit perfectly and then the "responsive web" technology would take care of the rest? What size should I make the background image?

December 07, 2013 01:48 AM
User photo
Bjørn Otto Vasbotten

I have the same question as Ozgul, which image size is good to have on a background image when going for this setup?

March 27, 2014 02:45 PM
User photo
Quinn Omori
Unbounce

Hi Bjorn - there isn't a concrete answer for size, other than having an image that's big enough that it won't pixelate (but you won't want to go too big, as that could affect load times).

The key is to pick an image that still looks good if it's clipped a bit on either the sides or the top and bottom.

You're going to get a bit of clipping of, say the height, if your image isn't that wide and your page loads in a wide screen. If you make your browser window short and quite wide, you can see what I mean if you load up this test page: http://unbounce.quinnomori.com/background-image-test/. The poor cat's face will be cut off.

If you adjust your browser window to be less wide, you'll see the full image come into frame.

By contrast, this website uses a forest image as it's background, so no matter how you're browser window is shaped, it won't cut off the photo in a jarring way: http://www.owlconcept.com/

 

March 27, 2014 04:04 PM
User photo
Sagheer ud din

It didn't work, I used 1920 px wider image, I am using Google Chrome browser. I can still see the scroll. 

October 04, 2014 01:43 PM
User photo
Quinn Omori
Unbounce

Hi Sagheer - I took a look at your pages and noticed that the one you have this code on doesn't have a background image for the entire page. To clarify, this will only affect a page background image. It won't stretch background images that are set for a particular page section.

October 06, 2014 10:04 AM