Twenty eleven child: footer background image (colophon) issue

  • Resolved kubegusa

    (@kubegusa)


    12 years ago

    I have a Twentyeleven Child theme
    https://www.sparklynx.be/preview/demaeyer

    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. https://www.sparklynx.be/preview/demaeyer/?page_id=8

    Would be grateful for any pointers.
    Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • esmi

    (@esmi)

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    https://getfirebug.com/

    Thread Starter kubegusa

    (@kubegusa)

    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?

    Michael

    (@alchymyth)

    not a WordPress problem

    – don’t add the background image to the paragraph tag, but possibly to the .textwidget class

    Thread Starter kubegusa

    (@kubegusa)

    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?

    Thread Starter kubegusa

    (@kubegusa)

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

    Thread Starter kubegusa

    (@kubegusa)

    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!

    Thread Starter kubegusa

    (@kubegusa)

    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.

    Thread Starter kubegusa

    (@kubegusa)

    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;
}

    https://www.sparklynx.be/preview/demaeyer

    Somehow the image is still repeated for each paragraph

    Thread Starter kubegusa

    (@kubegusa)

    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..

    Thread Starter kubegusa

    (@kubegusa)

    ok resolved

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Twenty eleven child: footer background image (colophon) issue’ is closed to new replies.