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.
Related Articles RSS Feed
Add or Embed Video on Product Pages
Added on Wed, Nov 6, 2013
Changing Display Labels throughout your Storefront
Added on Fri, Jun 14, 2013
How do I add a Category Banner / Image
Added on Tue, Jun 23, 2015
Adding a Banner, Link, or Text as a CMS Block to individual sections of your site
Added on Tue, May 29, 2012
Changing Your Store’s Name
Added on Tue, May 22, 2012
Adding New Pages to NRO
Added on Fri, May 25, 2012
How do I disable Ratings & Reviews from the product pages?
Added on Tue, Jul 21, 2015
Displaying the Thawte seal on your website
Added on Mon, Oct 28, 2013
How do I make my site responsive?
Added on Thu, Jul 30, 2015