Repeating Footer Image

• 

  kingsfin · Member · Jul 21, 2016 at 11:24 pm

  • Copy link
  • Add topic to favorites

  Do you know how to get the footer image not to repeat but to stick to the bottom?

  The blog I need help with is: (visible only to logged in users)

• 

  kingsfin · Member · Jul 21, 2016 at 11:27 pm

  • Copy link

  Also, so the featured image doesn’t repeat either

• 

  hallluke · Member · Jul 22, 2016 at 7:37 am

  • Copy link

  I can see your footer background image repeating when viewed on a mobile which you can fix by adding a repeat and position declaration to your existing code so that it looks like this:

  #colophon {
  	background: url('https://kingsfin.files.wordpress.com/2016/07/footer-image13.png');
  	background-size: 100%;
  	height: 24em;
  	background-repeat: no-repeat;
  	background-position: bottom;
  }

  I don’t see any other images repeating, did you mean the product examples or the main header background? If you post a screenshot of what you’re seeing it will help me figure it out.

• 

  kingsfin · Member · Jul 22, 2016 at 5:40 pm

  • Copy link

  I’m not sure how to include a screenshot on here :/ but maybe this way you can see: https://kingsfin.wordpress.com/distribution/

  Its the featured image at the top, it repeats itself, it does that on the about us page as well.

• 

  hallluke · Member · Jul 22, 2016 at 6:19 pm

  • Copy link

  I only see the image of the forklift once on that page. Here’s how to take a screenshot so you can share how it looks for you.

• 

  kingsfin · Member · Jul 22, 2016 at 8:03 pm

  • Copy link

  Ok, I put the screenshot on here:

  WARRANTY

  The other question I had was, the footer image is there anyway to make it so it sticks to the left, bottom and right as its viewed on different sizes such as a phone, Ipad etc.

• 

  hallluke · Member · Jul 22, 2016 at 10:56 pm

  • Copy link

  OK I see it now, thanks for clearing that up.

  You already have some code for the element containing the header image, try changing it to include code to stop the background repeating:

  #primary-header.has-background-cover {
  	height:30em;
  	background:#fff;
  	background-repeat: no-repeat;
  }

  It looks like you modified the footer image based on my last suggestion already, the image is scaling with the viewport on mobile and tablet views too.