Need help? Check out our Support site, then


HTML or CSS Background Tag?

  1. I am trying to put some code into a Text Widget that applies an image/photo as a background. HTML code says background="file or url name" and CSS code background-image: "url name", and I can't get either one of them to work in my widget - the whole background reference always just disappears when I go to save it.

    Do I need to purchase the CSS upgrade in order to do this? If not, any idea as to why the text widget isn't recognizing the background "command?"

    Thanks.

  2. On which tag are you trying to apply the "background" attribute?

  3. Here's how I have things coded (and hopefully I'm using the "comment out" command correctly here:

    <!--
    <table width="120" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border:1px solid #000000;">
    <tr>
    Object
    <td>Word</td>
    </tr>
    </table>
    --!>
    That all works correctly and is accurately reflected in my blog (very last thing on the left side column). Here now is how I have it coded with the background attribute:

    <!--
    <table width="120" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border:1px solid #000000;">
    <tr>
    Object
    <td
    background="http://metyme.wordpress.com/files/2008/03/yarn_divider9.gif">
    </td>
    </tr>
    </table>
    --!>

    I found the code/language wording at http://www.w3schools.com and double-checked that it was in the HTML tutorials! In my HTML editor, instead of pointing the background to an http address, I point it to my hard drive and it works just fine. I obviously can't point it to my hard drive from WordPress, but am just confused as to why the first http reference to a picture on Flickr works (though it's an <a href), but it doesn't work the second time in the table cell (I tried pointing it to both Flickr and WordPress where I have the image that I want to use stored).

    I hope that's not actually too much information but would rather be forthcoming here so we don't have to message back and forth a hundred times.

    Thanks for your time and help with this.

  4. You will need CSS to save it but anyone can preview it regardless if they have it or not.

    Try doing something like this:

    #menu ul li {
    	background-image:url('image url here');
    }

    and/or

    #menu ul ul {
    	background-image:url('image url here');
    }
  5. Did you try:
    <td style="background-image:url('image url')"></td>
    Or even directly in the table tag?
    I'm not sure whether it will work, but you should give it a try.

    Upload the picture to your wordpress.com blog (as for inserting it in a new post) then go to manage > uploads and copy the address, which you have to use instead of 'image url'.

  6. isadora - I tried <td style="background-image:'url'"></td> and that didn't work (image is already uploaded into WordPress).

    mike92 - tried your suggestions, too, and no dice there either. But to be clear, are you saying I need the CSS upgrade to...what? Add tables into text widgets? Or just use the background command in tables, in text widgets?

    I'm really getting into the HTML coding thing with my blog, so it's worth the $15 for me to upgrade, but I like to know the "why" of something as well...like specifically why I can't get this to work!

    Thanks BOTH OF YOU for your help - you've been great, and it's a nice change out here to have a helper who's not condescending or rude (seriously)! :)

  7. FYI - I was curious to see if my code was "right" so I just went out and quickly created a blogger account, threw the exact code that I'm trying to put into my text widget out on that blog and it worked perfectly: http://madzoey.blogspot.com/. But I don't want to use blogger - I like WordPress!

  8. ruthomp, It's funny, the code is there, but there's just no way to display the image as a widget background - I suppose I could work it out with some time, but maybe we can find another way to achieve what you want. Do you want just to display an image? Do you want to put some text in the table with the picture as a background?

  9. You're great! But no, don't spend a lot of time on it - a friend of mine said "oh, I like what so-and-so did on their blog" and I said, "give me time, I'll figure out how they did that" and so now I'm just OCD'ing! Did you take a look at the link in my last post (madzoey at blogspot)? All I'm trying to do is create what some people call a "percentage bar" or a "ticker" of sorts. Let's say that I'm starting a bathroom remodeling project...I want the title above the percentage bar to be a link to the newest picture of how far along i am; then i want the background image of the percentage bar to be hammers, and from left to right the number of hammers that you see is controlled by the % amount that I put into the code, which is reflective of how far along I am in my bathroom remodeling project. On the link to the quick madzoey blogger I set up, the first percentage bar is set at 40% and the second one is set at 85%, each representative of a different project that I'm working on.

    Do you agree/disagree that in order to use the background command in a TEXT WIDGET that I need to CSS upgrade? I don't mind doing it as long as I'm 100% positive that the upgrade is the solution to this problem. Do you think it might be a bug that needs a fix?

    I can see how developers get hooked on this stuff - even though this one thing frustrates me, I'm having a BLAST learning all of this and creating new little things every day!

  10. OK, have a look at this:

    <div style="border:1px solid #000000;background-color:#ffffff;width:120px;height:12px;overflow:hidden;">
    <div style="width:45%;overflow:hidden;"><img src="http://metyme.files.wordpress.com/2008/03/skdbutton.jpg" /></div></div>

    It does exactly the same as your table and you can change that 45% to whatever you like as in the table.

  11. Oh, btw, you don't need any upgrade for this solution.

  12. It worked - you're awesome!! But I gotta ask...is this HTML code or CSS code? I don't know what the div tag means so of course I'm going to have to go study up on that now.

    Thank you so much!!

  13. That's html with css formatting (div is a html tag - it means "division" and it's a model similar to the old netscape layers, so you'll still hear people of my age speaking of layers when they mean divs) and all that code in the style attribute is css code (so-called "inline css" formatting).
    You know, in theory, html is only a description language, formatting should be done by css to keep the content independent from the way it looks like.

  14. I promise I will NOT use you as my personal CSS tutor...just one last question because I've spent the last 1.5 hours at my CSS on-line tutorial and I'm not seeing it there:

    I would like to add one more layer - text - that I want to be the top layer that run inside of and on top of the background image. I've tried doing this a few ways but what happens is that the % from the 2nd layer also dictates how much of the words are shown (i.e., if the % in the 2nd layer is 45 percent, then I only get "45% of g" instead of "45% of goal reached." I've tried re-ordering the layers and that didn't work; I tried setting the text layer background color to "transparent" and that didn't work; I tried making the text layer position "absolute" and that didn't work...any ideas?

    Promise - last question!!

  15. I FIGURED IT OUT!!!!!!!!!! It's not the best workaround (I had to change the first layer color to "transparent" and the overflow-color of the second layer to "transparent," but hey - it worked!!!

    THANKS SO MUCH!!

  16. You'll have to adjust a bit the positioning (change the 15px from the top and the 2 from the left as you wish) and the text colour, but this code will do (if I understood what you want to achieve):

    <div style="border:1px solid #000000;background-color:#ffffff;width:120px;height:12px;overflow:hidden;">
    <div style="width:45%;overflow:hidden;z-index:1;"><img src="http://metyme.files.wordpress.com/2008/03/skdbutton.jpg" /></div></div>
    <div style="position:relative;top:-15px;left:2px;z-index:2;color:red;">45% of goal reached.</div>
  17. That happens when you leave windows open while speaking on the phone... :-)
    I'm glad it worked even without my input. Great!

Topic Closed

This topic has been closed to new replies.

About this Topic