WordPress.org

1. RebootRecords
   Member
   Posted 1 year ago #
   

   Hi,

   I want to add the below image to the bottom of the screen, centred and behind the content so it is fixed in place like the background

   http://physmaticsmusic.co.uk/wordpress/wp-content/uploads/2011/08/quote.png

   does anyone know how to do this?

   Thanks

2. websak
   Member
   Posted 1 year ago #
   

   Hi

   Do you want it to appear in the footer?

3. RebootRecords
   Member
   Posted 1 year ago #
   

   hi,

   not in the footer.

   I want it to appear at the bottom of the screen, no matter where you are on the page.

   I tried playing around with position:absolute but couldnt get it right

   Thanks

4. RebootRecords
   Member
   Posted 1 year ago #
   

   anyone?

5. Aboobacker P
   Member
   Posted 1 year ago #
   

   Place a <div> with a class at the end of the footer.php just before the </body> tag. Then apply css properties to the class in your style.css. So it should be as follows:
   <div class="footer_banner"></div>
   

   .footer_banner{
   	background:url(http://physmaticsmusic.co.uk/wordpress/wp-content/uploads/2011/08/quote.png) no-repeat;
   	height:799px;
   	height:67px;
   	margin:0 auto;
   	display:block;
   }

   Change the image URL if needed

6. alchymyth
   The Sweeper & Moderator
   Posted 1 year ago #
   

   http://www.w3schools.com/css/css_positioning.asp

   position: fixed; should work;

   example, possibly be added just before the </body> tag:
   <div style="position:fixed;width:100%;bottom:0;text-align:center;"><img src="http://physmaticsmusic.co.uk/wordpress/wp-content/uploads/2011/08/quote.png" alt="" /></div>

7. websak
   Member
   Posted 1 year ago #
   

   try this, this might be helpful for you

   http://www.cssstickyfooter.com/using-sticky-footer-code.html

   regards

8. RebootRecords
   Member
   Posted 1 year ago #
   

   Great

   Thanks alchymyth - that worked

   how can i get it behind the content though?

   Thanks again

9. alchymyth
   The Sweeper & Moderator
   Posted 1 year ago #
   

   try and add z-index:-1; to the styles of the above snipppet.

   http://www.w3schools.com/cssref/pr_pos_z-index.asp

Topic Closed

This topic has been closed to new replies.