Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Footer Background image!?  (How to?)
 
gmcleod
Jr. Member
 
Total Posts:  11
Joined:  2013-07-16
 

Hi there,

Im fairly new to editing the layout and theme of a Magento.
I need to know how to change the background image of the footer, as I have tried using the layer option to place it behind the current text in the footer static block, but that does not work. I just need to edit the CSS which is presumably and currently background-color to background-image: ect..

but if anyone knows of a better way to change/input a footer background image that would be dandy!

Thanks for reading and any replies!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Template fans
Guru
 
Total Posts:  446
Joined:  2009-11-02
 

Find and edit app\design\frontend\base\default\template\page\html\footer.phtml

 
Magento Community Magento Community
Magento Community
Magento Community
 
gmcleod
Jr. Member
 
Total Posts:  11
Joined:  2013-07-16
 

Hi! And thanks for your reply!

I\\\’ve found the CSS file, and the corresponding HTML file, but when I change the \\\"background color\\\” to a background image which I have uploaded in the same directory under images, nothing happens (I did try refreshing the Cache). I presume its something to do with the size of my image, but from the CSS I can see the footer has a border of 10px so I know the length should be 940 (Same as other items on the page).

Would you mind having a quick look at the code? It\’s the unedited version and my image is 940x223

HTML This is all of the footers HTML:

<div class=\\\"footer-container\\\">
    <
div class=\\\"footer\\\">
        
<?php echo $this->getChildHtml(\\\'bottomContainer\\\'?>

        
<div class=\\\"footer-links\\\">
        
  
<?php echo $this->getLayout()->createBlock(\\\'cms/block\\\')->setBlockId(\\\'footerLinks\\\')->toHtml() ?>
  
        
<div class=\\\"payment\\\">
        <
img src=\\\"<?php echo $this->getSkinUrl(\\\'images/creditcards.gif\\\'); ?>\\\" alt=\\\"We Accept all Major Credit Cards\\\" />
        </
div>
            
        
            
<?php //echo $this->getChildHtml(\\\'cms_footer_links\\\') ?>
            
<?php //echo $this->getChildHtml(\\\'footer_links\\\') ?>
            
<?php //echo $this->getChildHtml(\\\'newsletter\\\') ?>
            
<!--  -->
        </
div>
       
    </
div>
            
</
div>

CSS

/* Footer ================================================================================ */
.footer-container { background#F5F3F2;  -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.footer {  padding30px 0px 30px 25px;margin-bottom20pxmargin-top20px;}
.footer a { color:#444; }

.footer h6 { font-size13px;margin-bottom10px}
.footer .footer-block { width161pxfloatleft;margin-left15px;dislayinline;}
.footer .footer-block.first { margin-left0px}
.footer .payment { floatrightwidth210px;padding-right20px}
.footer li { displayblockpadding:0 5px 5px 0margin:0 3px 0 0}
.footer .links li.last { background:none !importantpadding-right:!important}
 
Magento Community Magento Community
Magento Community
Magento Community
 
gmcleod
Jr. Member
 
Total Posts:  11
Joined:  2013-07-16
 

Never-mind! I got it!

I forgot to put “URL” in the background image CSS rule. Silly mistake.

But I just kept resizing and uploading until I got the correct size!

So if anyone reads this, as stated above, edit the HTML if required and then change the CSS background color to background image: url(/...)

The CSS file is located: /home/SITENAME/public_html/skin/frontend/default/THEMENAME/css/Style.css

Thanks again!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top