Applying a background image

Purpose:

To explain how to apply a background image.

Solution:

It’s possible to add a page background via CSS. Let’s say you wanted to change the light gray background of the Celebrity theme to use a background texture image (named bg-grey.gif in this example), instead of a solid color.

Here’s one possible way to do this, using the Admin Panel web site:

1) Upload the background image
a. Go to the CMS / Images and Other Files.
b. Click the upload button and upload your background image.

2) Go to System / Configuration, in the Design section, on the HTML Head tab, and enter the following in the Miscellaneous Scripts field (be sure to click the Save Config button to save your change)*Note: these styles reference the image file name that has been used in this example. You'd substitute your image file name, instead:

<style>
.header-container { background: transparent url(/media/wysiwyg/bg-grey.gif) !important; }
.main-container { background: transparent url(/media/wysiwyg/bg-grey.gif) !important; }
.footer-container { background: transparent url(/media/wysiwyg/bg-grey.gif) !important; }
</style>

If you only want to change the background of the light gray area and not the footer section, just leave out the .footer-container line.

Here is some CSS that doesn't tile the backgroud (note that the body background color would need to match the bottom color of the background image to avoid a visible seam):

<style>

.header-container { background: transparent !important; }

.main-container { background: transparent !important; }

.footer-container { background: transparent !important; }

body { background: #000000 url(/media/wysiwyg/page-background.jpg) no-repeat left top !important; }

</style>

Article ID: 377
Created On: Mon, Oct 15, 2012 at 2:56 PM
Last Updated On: Mon, Nov 26, 2012 at 12:45 PM

Online URL: http://help.ncrretailonline.com/article/applying-a-background-image.html