Full-width header / footer

Hi ejovin,
Setting a page section (in your case header and footer) to full width is really easy. Select the page section, look in the properties tab on the right, and in the panel called Background Properties there’s a checkbox for “Stretch background to page edges”:

Hope that helps!

No problem!

Hi Jeremy - the checkbox is still there. The properties pane is contextual, so it changes based on the page element you have selected.

To see the Stretch Background to Page Edges option, you have to first select the relevant page section, then you should see the option on the side.

Check out this screenshot to see what I mean:

Hope that helps!

Hi Ori, 
We’re currently in the middle of rolling out a redeployment of how image backgrounds work in Unbounce, but if you were wondering how to stretch out a background image manually so that it fills the whole page or section instead of tiling, read on!

Assign an image as the background image for your page, or section by clicking on the “Change” button in the “Background Properties” panel.

Click on the “Stylesheets” button in the bottom left of the editor.

Head here: https://gist.github.com/GaryUnbounce/9081974 and copy the code.

4. Create a new Javascript on your Unbounce page, and paste the following:

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:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

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.

In “> Advanced” below. 😉