[resolved] Twenty eleven child: footer background image (colophon) issue (11 posts)

  1. kubegusa
    Posted 3 years ago #

    I have a Twentyeleven Child theme

    I am using the 2nd footer widget area to have centered and paragraphed text and I want to have a centered background image to it too.

    The text looks good, but the background image somehow is repeating at each new paragraph.

    This is the code I added:

    #colophon #second .textwidget p {
       text-align: center;
       line-height: 150%;
       background: url(images/footer.png);

    When I add the code
    no-repeat center center fixed to the background property, I also don't get the result I'm looking for. It then shows the image that starts on the 1st paragraph, and nothing else. So a small 'bar' shows behind the 1st paragraph of the centered text.

    I want the image to be centered - you can see the left margin is larger than the right margin.
    And I want the image to show in full.

    I added the image on one of the pages so you can see what the image looks like. http://www.sparklynx.be/preview/demaeyer/?page_id=8

    Would be grateful for any pointers.

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.

  3. kubegusa
    Posted 3 years ago #

    Thanks. I was using Chrome, but now checking in Firefox and installed the Firebug add on. I can see it allows to check the css in the web page. But I don't understand how it is going to help me fix my problem..? Can you please get me started on how to use this?

  4. Michael
    Part-Time Forum Moderator
    Posted 3 years ago #

    not a WordPress problem

    - don't add the background image to the paragraph tag, but possibly to the .textwidget class

  5. kubegusa
    Posted 3 years ago #

    Hm.. I've gond through the doco, and as far as I can see, Firebug helps to check which div or class is affected. But I think I already knew that, I think the class I added the background image to is correct. I think it's the CSS3 code itself somehow that is causing the incorrect showing of the background image...

    Is my understanding of this correct?

  6. kubegusa
    Posted 3 years ago #

    ahhh.. ok, I just read your comment alchymyth, that makes sense.. going to try that right now, thanks!

  7. kubegusa
    Posted 3 years ago #

    ok that did it.. but I noticed now that my image needs to be resized. It only shows from the middle down.

    Thanks for your support!

  8. kubegusa
    Posted 3 years ago #

    Any ideas on how to calculate the size what the image should be to be fully showing in the widget area..? I'm going to do trial/error but it seems like this could take some time before I get it right.

  9. kubegusa
    Posted 3 years ago #

    You know what, I cried victory too soon...

    Adding the background image to the .textwidget class like this, didn't fix the issue.

    #colophon #second .textwidget {
          background: url(images/footer.png) no-repeat center;


    Somehow the image is still repeated for each paragraph

  10. kubegusa
    Posted 3 years ago #

    ok never mind, I just realized that I still had the background image code under the paragraph section in the CSS as well - duh.

    on to resizing the image now..

  11. kubegusa
    Posted 3 years ago #

    ok resolved

Topic Closed

This topic has been closed to new replies.

About this Topic