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, 2: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, 4: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, 4: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, 9: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 3, 2011, 4: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 4, 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 4, 2011, 3: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, 2:04 PM
User photo
Davide Varvello

Hi Carter,

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

TIA

January 27, 2012, 7: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, 9:03 PM
User photo
Rodrigo Ferreira

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

Thank you.

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

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

November 22, 2013, 4: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 7, 2013, 1: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, 2: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, 4: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 4, 2014, 1: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 6, 2014, 10:04 AM
User photo
Daniel Ossa

I am not getting this to work for me either.  I would like to apply it to the section where I have the background image without affecting the rest of the sections, but I'm not even being able to stretch the image at all.  Actually, I haven't been able to change the section ID...Help Please!!

November 16, 2014, 10:55 AM
User photo
Daniel Ossa

What size image do you recommend for a whole page/section background picture?

November 16, 2014, 10:57 AM
User photo
Quinn Omori
Unbounce

Hi Daniel - it looks like Alex helped you out with this via email. If we can help with anything else, don't hesitate to get back in touch.

November 16, 2014, 7:52 PM
User photo
Keith Norris

Hey everyone, if your having issues use this code! It will work to get your full background image

Just replace my ID tag with yours  for the section you want to use it in in unbounce. Make sure though you size it to the size you want ti to show. Too big and it will look that way. You may have to play with your image's size. I use 2200 x 1300.

<style type="text/css">
#lp-pom-block-20 {
display:block;
background-position-x: 50%;
background-position-y:0%;
background-size: 100%;
background-attachment: initial;
background-repeat: no-repeat;
background-position:center top;
border-style:none;
margin-left:auto;
margin-right:auto;
position:relative;
border-radius:0px;
}
</style>

January 13, 2015, 1:49 PM
User photo
Amit Zala

Hi There - I can get this working when I use the image as a background in 'page properties' - but I can't get this working when I use the image in a section as I can't modify the Id of the section ... ??? Any help would be gratefully received !! Cheers

January 19, 2015, 8:48 AM
User photo
Quinn Omori
Unbounce

Hi Amit - instead of modifying the ID of the section, you'll just need to modify Keith's script to replace #lp-pom-block-20 with the ID of your section.

January 19, 2015, 9:35 AM