Unbounce Answers/Next Steps/Tips & Tricks
How to make a background image scale the full page (CSS3)
Carter Gilchrist
posted this on March 24, 2011 02:02 pm
Important: This trick relies on the user's browser having CSS3 support. We'll be building this into the core to support all browsers, but until then, if you're confident the majority of your visitors are using one of the following browsers, then read on..
- Safari 3+
- Chrome Whatever+
- IE 9+
- Opera 10+
- Firefox 3.6+
To make it scale fullscreen:
- Assign an image as the background image for your page (not a page section) by clicking on the "Change" button in the "Background Properties" panel.
- Click on the "Stylesheets" button in the bottom left of the editor.
- Paste in the following:
<style type="text/css">
#lp-pom-root {
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
</style>
That's it! Save and republish. Note that you will not see the scaling effect take place inside the editor. Also note 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...
Comments
Doesn't Work
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.
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?
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.
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.
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.
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.
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?
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..
Hi Carter,
Is there a workaround for non css3 compatible browsers? (IE8, IE7, ...)
TIA
Nice trick! It worked for me once I unchecked the stretch the background box at http://unbouncepages.com/cashflow/