WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Twenty Eleven] make img footer responsive (14 posts)

  1. Pieterbroeckx
    Member
    Posted 1 year ago #

    How do i make my footer (whit image) responsive ?
    need to finish theme in few days
    i searched everywhere can't find any solution

    http://mtbclinics.co.nf/

    #site-generator {
    	background-image: url("/wp-content/themes/mtbclinics/images/bgr_footer_img.png");
    	color: gray;
    	padding: 64px;
    	/*hide wordpress add*/
    	font-size: 0px;
    	clear: both;
    	margin: 0 auto;
    	max-width: 960px;
    }

    [ Please do not bump, that's not permitted here. ]

  2. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    You can try this:

    #site-generator {
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-image: url(images/bgr_footer_img.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
    }

    Thanks,
    Emil

  3. Pieterbroeckx
    Member
    Posted 1 year ago #

    Thanx Emil!
    but still needed "padding" and i needed to remove "background-attachment" else it was just black.
    Now it crop's the image buth i'm happy whit this result :)

    this worked:

    #site-generator {
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-image: url("/wp-content/themes/mtbclinics/images/bgr_footer_img.png");
    	padding: 64px;
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-size: cover;
    }
  4. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    very nice :)

    Emil

  5. George Hozendorf
    Member
    Posted 10 months ago #

    I'm a total newbie to wordpress so forgive me if this seems like a really dumb question.

    The footer in my twentyeleven theme has <div id="site-generator"> not #site-generator {

    I got an image in the footer by adding the following to footer.php

    10 Removed Proudly Powered by WordPress
    Deleted:
    <div id="site-generator">
    <?php do_action( 'twentyeleven_credits' ); ?>
    " title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?>
    </div>
    in Appearance/Editor/footer.php

    11 Add image to footer
    Inserted:
    <center>
    <img src="http://gcdcc.safeport.com/wp-content/uploads/dcf_footer.jpg" alt="dcf_footer.jpg">
    to Appearance/Editor/footer.php (just before <?php wp_footer(); ?>

    This works except for the fact it's not responsive. When I replace the footer.php with a fresh copy and use your code, it just puts the text in the footer area.

    Please tell me how to accomplish what you did. I tried putting your code in the style.css with no luck.

    Thanks in advance for helping this newbie.

  6. Pieterbroeckx
    Member
    Posted 10 months ago #

    did you made a child theme ?
    a child theme plugin

  7. George Hozendorf
    Member
    Posted 10 months ago #

    Yes.

  8. Pieterbroeckx
    Member
    Posted 10 months ago #

    do not change original themplate
    try this in the child theme style.css

    /*hide meta bottom*/
    .singular footer.entry-meta {
    	display: none;
    }
    /*image in footer*/
    #site-generator {
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-image: url("/wp-content/uploads/dcf_footer.jpg");
    	padding: 50px;
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-size: 100%;
    	/*hide wordpress add*/
    	text-indent: -9000px;
    }
    /*remove space between content and footer*/
    #supplementary {
    	padding: 0em 0%;
    }
  9. George Hozendorf
    Member
    Posted 10 months ago #

    Thanks for the suggestion. But, that put me back to Proudly powered by WordPress.

  10. George Hozendorf
    Member
    Posted 10 months ago #

    Just added

    <center>
    <img src="http://gcdcc.safeport.com/wp-content/uploads/dcf_footer.jpg" alt="dcf_footer.jpg">

    the the child footer.php. Now I've got a non-responsive image and Proudly powered....

  11. Pieterbroeckx
    Member
    Posted 10 months ago #

    I can't see any proudly powered by stuff on you'r site

    i "hide" it whit:

    #site-generator {
    text-indent: -9000px;
    }
  12. George Hozendorf
    Member
    Posted 10 months ago #

    Sorry, I was working on local host. Made changes online, so please take a look now.

  13. George Hozendorf
    Member
    Posted 10 months ago #

    Finally got Pieterbroeckx's suggestion to work. But now there is padding at the top and bottom of the image. I see the line, padding: 50px; If I change it to 0, the image gets chopped off. What should the padding be changed to?
    Thanks.

  14. Pieterbroeckx
    Member
    Posted 10 months ago #

    I don't know what you mean
    maby this can help you?
    http://www.w3schools.com/css/css_padding.asp

Topic Closed

This topic has been closed to new replies.

About this Topic