How do I automatically have an image in the footer re-size

  • Resolved TennisMatt

    (@tennismatt)


    13 years, 2 months ago

    Hi

    I have been using WP for about 2 months now, but cannot find a way of solving this one, so any help would be very much appreciated, thanks.

    I am using twentyeleven child and have customised my footer and inserted a 1000px wide image. However when the screen becomes smaller, it does not resize the footer image (the rest of the footer resizes!). I have the mobile plugin so it all resizes for phones etc, but still the footer image stays large and flies off the right.

    My website is https://www.icanplaytennis.net

    and my footer.php in child theme contains:

    [Code moderated as per the Forum Rules. Please use the pastebin]

    Many thanks
    Matt

Viewing 4 replies - 1 through 4 (of 4 total)

  • try and add a css class to the image tag, and add a corresponding style at the end of style.css in your child theme;

    example:

    <img class="footer-image" src="https://....els.jpg" alt="grass_1000pixels.jpg">

    img.footer-image { width:100%;height: auto; }

    Thread Starter TennisMatt

    (@tennismatt)

    Hi Alchymyth

    many thanks for the quick response, I really wasn’t expecting anything so soon!

    I tried as you suggested, and also changed the width to auto, but I’m still having the same problem.

    I put all the code in my style sheet, is that correct?

    thanks again
    Matt

    a:
    the bottom of style.css of your child theme is broken because there is html code added;

    <img class="footer-image" src="https://icanplaytennis.net/wp-content/uploads/2011/09/grass_1000pixels.jpg"
alt="grass_1000pixels.jpg">

img.footer-image { width: auto;height: auto; }

#page {margin-bottom:0;}

    remove that part:

    <img class="footer-image" src="https://icanplaytennis.net/wp-content/uploads/2011/09/grass_1000pixels.jpg"
alt="grass_1000pixels.jpg">

    (html is not allowed in a stylesheet)

    b:
    please use: width: 100%; as i suggested.

    c:
    you also need to edit footer.php and add the css class into the image tag;
    change from:
    <img src="https://icanplaytennis.net/wp-content/uploads/2011/09/grass_1000pixels.jpg" alt="grass_1000pixels.jpg">
    to:

    <img class="footer-image" src="https://icanplaytennis.net/wp-content/uploads/2011/09/grass_1000pixels.jpg"
alt="grass_1000pixels.jpg">

    Thread Starter TennisMatt

    (@tennismatt)

    Alchymyth you are a star

    Thank you so much. It works perfectly now, and thank you for the explanation of why as well, it really helps further my understanding/ learning ??

    many thanks
    Matt

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How do I automatically have an image in the footer re-size’ is closed to new replies.