• Hi I`m having some problem been doing different codes and try just about everything I can find out but still having a problem with putting a background image on my footer I even put this code on my CSS and nothing its not working maybe someone can help ??

    this is the code I put in the css

    footer#footer .colophon {
    /* Adjust the Image location ‘wp-content/uploads/NAMEOFFILE.png’ */
    background: url(/wp-content/uploads/NAMEOFFILE.png) repeat fixed 0 0 ;
    }

    but nothing does anyone know how to and where like step by step
    thank you
    Danny

Viewing 11 replies - 1 through 11 (of 11 total)
  • Just tested it again and it works for me. I assume you added it to your CustomCSS? Can we see a link to your site?

    But OK, there’s always a symptom we need to eliminate first.
    1) Plugin Conflict
    Deactivate all plugins
    Test if OK
    If OK, reactivate plugins one-by-one to find the culprit

    Thread Starter night60000

    (@night60000)

    Hi sure its

    I put that code in in custom CSS

    I try do deactivate all the plug in and test again and it still does the same think it doesn’t put the background image the way I need it to this is the image

    Thread Starter night60000

    (@night60000)

    I don’t know but the link is not snowing up for the site
    https://www.snowhuggers.com/w

    and the image is https://snowhuggers.com/w/wp-content/uploads/WP-footer.png

    You’ve removed the .colophon footer and using my snippeted widgets. So try:

    footer#footer {
    background:     url("https://snowhuggers.com/w/wp-content/uploads/WP-footer.png") repeat fixed 0 0;
      border-top: 12px solid #E9EAEE;
      color: #FAFAFA !important;
      padding: 0;
    }
    Thread Starter night60000

    (@night60000)

    Hi now I see it now but its not the on right-hand side and the background color is gone the image its the right size of the footer so it should be on the right side from the design

    OK, there’s all sorts of mess going on here.

    • You have a background image over the whole page, so that is, of course also in the footer when there is no background colour.
    • Your footer image is transparent, so of course your page background image is showing through and making it illegible.
    • You have text in footer widget 3, which is overwriting your footer background image and making it further illegible.
    • The height of your footer will be entirely dependent on the text you place in footer widgets 1 and 2, not on your background image, so you cannot control it without issues (see next point).
    • When you resize the screen, the image is so wide, it falls off the edge and you don’t see it. If you keep it in, you’ll force horizontal-scrolling which is a no-no.

    But let’s go back to basics here. Why are you trying to do this with a background image? This is an ideal candidate for images inside a text widget inside the footer widget area 3.

    I recommend the following:

    1. Cut your image up and extract 3 small images of the logos you want to display.
    2. Place them in footer widget area 3 with the <img> tag.

    This has the benefits:

    • You will keep the standard grey background
    • The resizing will be fully responsive, as the widget area’s responsiveness is built in to the theme
    • You won’t have height issues, as the images are in the foreground and will be rendered, whatever
    • Etc. It’s all so much easier
    Thread Starter night60000

    (@night60000)

    so let me ask u this how can I get other widget # 4 for the footer now I just have 3 so I can just put it there how would I go by it and do it the easy way and I can just put it there

    People, I have to tell you that nikeo’s code is a dream to work with. I’m not a programmer, but his code is so logical, I can work out swathes of it.

    He gives us a filter for the footer widget array and he gives us another for the widget classes.

    This means that the following works in a child theme’s functions.php. To find out how to use a child theme’s functions.php, see here. That article shows you how to place this code in the right place.

    // Add an extra widget in the footer. It gets registered automatically as part of the array
    add_filter( 'tc_footer_widgets', 'my_footer_widgets');
    function my_footer_widgets() {
    	return array(
                  'footer_one'    => array(
                                  'name'                 => __( 'Footer Widget Area One' , 'customizr' ),
                                  'description'          => __( 'Just use it as you want !' , 'customizr' )
                  ),
                  'footer_two'    => array(
                                  'name'                 => __( 'Footer Widget Area Two' , 'customizr' ),
                                  'description'          => __( 'Just use it as you want !' , 'customizr' )
                  ),
                  'footer_three'   => array(
                                  'name'                 => __( 'Footer Widget Area Three' , 'customizr' ),
                                  'description'          => __( 'Just use it as you want !' , 'customizr' )
                  ),
    			  'footer_four'   => array(
                                  'name'                 => __( 'Footer Widget Area Four' , 'customizr' ),
                                  'description'          => __( 'Just use it as you want !' , 'customizr' )
                  )
    
            );
    }
    
    // Now style all the footer widgets so they take up the right space
    add_filter( 'footer_one_widget_class', 'my_footer_one_widget_class');
    function my_footer_one_widget_class() {
    	return 'span3';
    }
    add_filter( 'footer_two_widget_class', 'my_footer_two_widget_class');
    function my_footer_two_widget_class() {
    	return 'span3';
    }
    add_filter( 'footer_three_widget_class', 'my_footer_three_widget_class');
    function my_footer_three_widget_class() {
    	return 'span3';
    }
    add_filter( 'footer_four_widget_class', 'my_footer_four_widget_class');
    function my_footer_four_widget_class() {
    	return 'span3';
    }

    I feel another snippet coming on….

    Thread Starter night60000

    (@night60000)

    Hi ElectricFeet thank you can u resend the link for the article to show me where to put this code it seem it didn’t work ( the link)

    Danny

    Oops, yes. I wrapped it in bacticks by mistake. Article here: https://www.themesandco.com/customizr/how-to-customize-customizr-wordpress-theme/

    Thread Starter night60000

    (@night60000)

    ElectricFeet thank you soo much where ware u all week when im trying to fix that problem it works great thank you ??

    Danny

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘footer backgroud image’ is closed to new replies.