Image background in text widget

  • Unknown's avatar
    corander · Member ·

    Hey,

    I’d like to use an image as a background in a text widget, and I get the image to show up fine with <div style=”background-image:url(myurl);”> in the widget or alternatively .textwidget{background-image: url(myurl); in the stylesheet, but I can’t get it to fill the entire widget. There are quite broad white edges around it, and it’s driving me mad. Is there any way to do this properly? The point is to get it to blend into the background, but no luck.

    Mear

  • Unknown's avatar
    sambauers · Member ·

    You did not specify a blog address or reason for posting when you created this topic.

    This support forum is for WordPress.com hosted blogs only. If you have a self-hosted WordPress blog you need to seek help at the WordPress.org forums, not here.

    If you don’t understand the difference, you may find this information helpful.

  • Unknown's avatar
    corander · Member ·

    Well, I have both, so that works out fine. :) It’s for http://hititrunning.wordpress.com/.

  • Unknown's avatar
    devblog · Member ·

    Replace the “background-image:” property with this:

    background: transparent url(yoururl) 0 0 HOW-YOU-WANT-IT-REPEAT;

    Where HOW-YOU-WANT-IT-REPEAT == “repeat-y” if you want it repeat vertically, or
    “repeat-x” if you want it repeat horizontally.

    HTH

  • Unknown's avatar
    corander · Member ·

    Thanks for the suggestion, but unfortunately it didn’t change. The widgets white borders are still there.:(

  • Unknown's avatar
    devblog · Member ·

    I’m sorry, I forgot about the white borders. If you have the CSS upgrade, then that can be tweaked, but if you don’t, then that’s something you can modify by just using inline CSS.

  • Unknown's avatar
    corander · Member ·

    All right, can you give me the dummies guide to modifying it? I’m not too steady when it comes to CSS. :) Either way is good I guess.

  • Unknown's avatar
    devblog · Member ·

    I need to see the widget on your blog in order to give you the proper code.

  • Unknown's avatar
    corander · Member ·

    Not much to see. :) http://www.student.uit.no/rfjentene/home/ I’m just trying to get the facebook link to blend in.

  • Unknown's avatar
    devblog · Member ·

    That’s not a blog hosted at wordpress.com. As a rule, in these forums, volunteers nor staff give support to people who have self-hosted blogs. The reason for this is because whatever solution works for a wp.com hosted blog may not work for a self-hosted one and vice versa.

    Support for self-hosted blogs is provided at: http://wordpress.org/support/

    Having said that, since it’s just CSS that needs to be modified, I’ll break the rule this once.

    Get rid of this rule (is the very last definition):

    .textwidget{ background: transparent url(http://www.student.uit.no/rfjentene/home/wp-content/themes/arclite/images/options/main2-bg.jpg)  0 0 repeat-y;

    Notice that that definition is missing the closing curly bracket “}”. Always make sure your definitions have opening and closing curly braces, otherwise you’ll have lots of unpleasant surprises…

    Now, add these two definitions to your CSS file (at the very end would be fine):

    #text-4 .box .the-content {height: 55px; min-height: 55px; padding: 0;}

#text-4 .box .the-content .textwidget{ background: transparent url(http://www.student.uit.no/rfjentene/home/wp-content/themes/arclite/images/options/main2-bg.jpg);}

    That should do what you want, hopefully.

  • Unknown's avatar
    corander · Member ·

    Thanks. I get your reasoning, and I’ll make sure to head over to wordpress.org next time.
    That definitely worked better. It’s still not quite what I want, there are some odd shadows and stuff, but I’m starting to think there are better ways to simply add an image link. Yet somehow I thought a text widget would be easiest. ;) Oh well.

  • Unknown's avatar
    devblog · Member ·

    Didn’t see the shadow. When I edit the CSS using the Web Developer tool for Fx, the images disappear, thus, overlooked it.

    To get rid of that shadow, try this:

    #text-4 .box {background: none;}

    Add it just above the two definitions I previously gave you. That should get rid of that shadow for that widget only.

  • Unknown's avatar
    corander · Member ·

    It’s looking perfect. Guess I should dedicate some time to learning css. I just rely on google to solve all my problems. ;) Thanks a lot for the help.

  • Unknown's avatar
    devblog · Member ·

    You’re welcome. Glad it worked.

  • Unknown's avatar
    sarahwbartlett · Member ·

    Hey, can I piggyback on this thread? I’m just new to WordPress.com, trying out Vigilance and successfully added a TEXT widget to my sidebar. What I’d like is to be able to post my logo there. On the ‘ABOUT” page, it links directly to my website (very nice!) but I’d like it to show on the home page as well. I was thinking of essentially placing the ‘about’ info in the text box.

    Can I upload an IMAGE to a TEXT widget? (I know NOTHING about CSS . . .)
    Thanks for your help :-)

  • Unknown's avatar
    raincoaster · Member ·

    Yes, you can upload an image to a text widget. Here are the instructions:

    Text Widget

    And please always give us a link to your blog, starting with http, when you ask a question here. We generally always need that to answer questions accurately.

  • Unknown's avatar
    sarahwbartlett · Member ·

    oooh, thanks so much and sorry. Don’t yet know the protocol, this being my first question. It’s http://womenwritingvt.wordpress.com.

    I’m going to try that right now!

  • Unknown's avatar
    raincoaster · Member ·

    No worries, everybody was new once.

  • The topic ‘Image background in text widget’ is closed to new replies.