Home » Categories » Multiple Categories

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>

Attachments Attachments
There are no attachments for this article.
Comments Comments
There are no comments for this article. Be the first to post a comment.