Repeating header/footer background images

We are often asked how to have a header or footer area which uses a background to span the full width of the browser window, but without selecting the option to have a the ‘sticky’ menu or ‘sticky’ footer area. One example of this is the “Beaton” Design sold separately in the ProPhoto store.

To get the effect of a background image which spans the browser window, you’ll be using a background image that is narrow, and repeated horizontally by your ProPhoto settings.

Create your content first

Since the background image you create will need to fit behind your header content or your footer content, you’ll want to begin by finalizing the content & layout of those areas first so their height won’t change. After you have finished setting up those areas, come back to this guide to learn about creating and uploading the background images.

Create your background image

We’re going to be honest – you might come back to this step a few times. Since you’re aligning your image behind your content, you might need to tweak your background until it sits just perfectly. Cropping or adding to the height of your image will get you there.

When creating your image, remember that the image is going to repeat horizontally. This allows you to make an image that is narrow since it will repeat to fill the browser width. Ideally, we’re talking about something like 10px wide or less, but the example below shows something a bit wider to illustrate the point. We could have gotten away with an image 1px wide, since there is no detail to the image – just a solid color.

Here’s an example background image we’ll apply at the top of a site, behind a header area using the masthead area and a menu bar:

The pink portion will appear behind the taller masthead area and the gray will appear behind the menu bar. We used no background color for the areas this background image falls behind so the menu and masthead areas had a transparent appearance.

Remember: you can also use PNG image format, allowing you to add transparent space along the top edge of the background image to offset from the top edge of the site. This is how the purple stripe appears behind the logo in the “Late August” Design and how the dropshadow effect is applied. Any deeper background image/color will be seen through in any part of your background which uses transparency.

Upload your background image

This example background image was uploaded in this ProPhoto area:
“ProPhoto” > “Customize” > “Background” > “Site outer background #1”
We’ll choose to have the image tile only horizontally so it repeats across the window, and we’ll choose to have the image appear positioned top left on the site, and lastly that the image will scroll with page so it doesn’t stay stuck up top.

bg-uploaded-ex

The result is the appearance of a full width header area, when in actuality, the header width is constrained by the overall site width. See the effect at the top of this design:

sarah-beth

If you happen to use Overall background image #1 already, then use the outer background #2 or #3 to create the effect described above.

What about the Footer Area?

You can use this same technique to create a background behind your Footer Area, but instead of choosing top left for the image position, you’ll need to select bottom left so the image appears at the very end of your site. Again, you’ll need to customize your Footer Area before you attempt to create and upload your background so things don’t become mismatched later. The “Beaton” Design uses a wide footer area appearance, seen here:

beaton-full-width

“Beaton” uses both a upper and lower background image to create a wide appearance for the header and footer areas

 

If you’re having trouble with your blog navigation links overlaying your background image, you can trim away part of your background until things fit, or you can adjust the spacing above/below your Footer Area to tweak the position, here:
“ProPhoto” > “Customize” > “Sidebars & Footer” > “Footer Area” > “Footer custom spacing”
Adjust the space added above or below the Footer Area until things look good:

footer-above-below-spacing

Footer Area spacing controls

We are often asked how to have a header or footer area which uses a background to span the full width of the browser window. One example of this is the “Beaton” Design sold separately in the ProPhoto store for the newer version 5 of our software.

To get the effect of a background image which spans the browser window, you’ll be using a background image that is narrow, and repeated horizontally by your ProPhoto settings.

Create your content first

Since the background image you create will need to fit behind your header content or your footer content, you’ll want to begin by finalizing the content & layout of those areas first so their height won’t change. After you have finished setting up those areas, come back to this guide to learn about creating and uploading the background images.

Create your background image

We’re going to be honest – you might come back to this step a few times. Since you’re aligning your image behind your content, you might need to tweak your background until it sits just perfectly. Cropping or adding to the height of your image will get you there.

When creating your image, remember that the image is going to repeat horizontally. This allows you to make an image that is narrow since it will repeat to fill the browser width. Ideally, we’re talking about something like 10px wide or less, but the example below shows something a bit wider to illustrate the point. We could have gotten away with an image 1px wide, since there is no detail to the image – just a solid color.

Here’s an example background image we’ll apply at the top of a site, behind a header area using the masthead area and a menu bar:

The pink portion will appear behind the taller masthead area and the gray will appear behind the menu bar. We used no background color for the areas this background image falls behind so the menu and masthead areas had a transparent appearance.

Remember: you can also use PNG image format, allowing you to add transparent space along the top edge of the background image to offset from the top edge of the site. This is how the purple stripe appears behind the logo in the “Late August” Design and how the dropshadow effect is applied. Any deeper background image/color will be seen through in any part of your background which uses transparency.

Upload your background image

This example background image was uploaded in this ProPhoto area:
“ProPhoto” > “Customize” > “Background” > “Site outer background #1”
We’ll choose to have the image tile only horizontally so it repeats across the window, and we’ll choose to have the image appear positioned top left on the site, and lastly that the image will scroll with page so it doesn’t stay stuck up top.

bg-uploaded-ex

The result is the appearance of a full width header area, when in actuality, the header width is constrained by the overall site width. See the effect at the top of this design:

sarah-beth

If you happen to use Overall background image #1 already, then use the outer background #2 or #3 to create the effect described above.

What about the Footer Area?

You can use this same technique to create a background behind your Footer Area, but instead of choosing top left for the image position, you’ll need to select bottom left so the image appears at the very end of your site. Again, you’ll need to customize your Footer Area before you attempt to create and upload your background so things don’t become mismatched later. The “Beaton” Design for ProPhoto 5 uses a wide footer area appearance, seen here:

beaton-full-width

“Beaton” uses both a upper and lower background image to create a wide appearance for the header and footer areas

If you’re having trouble with your blog navigation links overlaying your background image, you can trim away part of your background until things fit, or you can adjust the spacing above/below your Footer Area to tweak the position, here:
“ProPhoto” > “Customize” > “Sidebars & Footer” > “Footer Area” > “Footer custom spacing”
Adjust the space added above or below the Footer Area until things look good:

footer-above-below-spacing

Footer Area spacing controls

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us