background image tricky

Discussion in 'HTML' started by Nicole, Jan 8, 2009.

  1. Nicole

    Nicole Guest

    Hi User,

    I have an image, which I want to be the background of a table and / or table-cells.

    e.g. such a table:
    <table width="100%" cellspacing=4 cellpadding=7 border=2>
    <tr><td>&nbsp;</td>
    <th>test 1111111111</th><td>&nbsp;</td>
    <th>test 2222222222</th><td>&nbsp;</td>
    </tr>
    </table>

    To get the image into the background is easy: You just write background=url or similar to the td-tag or to the stylesheet.

    The problem comes here:
    I am not able to determine HOW the image is repeated in the single cell. "repeat: no repeat" is not done properly.

    And what I am not able to do at all: Draw the image STRETCHED to the individual cell in its whole of 100%.

    What I want to do, is a color effect like this:
    http://tanz.or.at/

    But I do not want to apply this 100%-stretch-effect to the background-image of the whole site (would be easy), but to the background of just a single cell of a table.

    Can somebody give me a hint how to do this?


    Thanks,
    Nicole
    Nicole, Jan 8, 2009
    #1
    1. Advertising

  2. Nicole

    Els Guest

    Nicole wrote:

    > I am not able to determine HOW the image is repeated in the single
    > cell. "repeat: no repeat" is not done properly.


    To not repeat a background image, use proper CSS:
    background-repeat:no-repeat;
    Read through this page for more options:
    http://www.w3.org/TR/CSS21/propidx.html

    > But I do not want to apply this 100%-stretch-effect to the
    > background-image of the whole site (would be easy),


    Really? How?
    The background image on tanz.or.at is not stretched, it's repeated.
    The same way you can repeat it in a table cell or any other element.

    --
    Els http://locusmeus.com/
    Els, Jan 8, 2009
    #2
    1. Advertising

  3. Nicole

    Nicole Guest

    Els wrote:

    > Really? How?
    > The background image on tanz.or.at is not stretched, it's repeated.
    > The same way you can repeat it in a table cell or any other element.





    Thank you for the link.
    It is great, but it contains just the usual tags.

    What I need may be an idea.


    The image of the link (tanz.or.at) is repeated vertically, but stretched horicontally.

    And if it would not be - this is exactly what I want:

    I want an image which fades from left to right within a cell.

    And this fading shall be visible independently of the inidivual size of the table. As a table can be "100%", I want the image "100%" and not repeated.

    If there is no appropriate tag - does somebody know a trick or work-around?



    Nicole
    Nicole, Jan 8, 2009
    #3
  4. Nicole

    Els Guest

    Nicole wrote:

    > The image of the link (tanz.or.at) is repeated vertically, but stretched horicontally.


    No, it's not.
    It is a very wide image, it is not stretched.

    > And if it would not be - this is exactly what I want:
    >
    > I want an image which fades from left to right within a cell.


    You will have to make such an image in a program like PhotoShop or
    GIMP.

    > And this fading shall be visible independently of the inidivual size
    > of the table. As a table can be "100%", I want the image "100%" and
    > not repeated.


    Can't be done in regular HTML/CSS as far as I know. 100% size of an
    image, means the image's own original size, not the size of its parent
    in the HTML structure.

    > If there is no appropriate tag - does somebody know a trick or work-around?


    Dunno - JavaScript maybe?

    --
    Els http://locusmeus.com/
    Els, Jan 8, 2009
    #4
  5. Nicole

    Els Guest

    Ben C wrote:
    > On 2009-01-08, Els <> wrote:
    >> Nicole wrote:


    >>> And this fading shall be visible independently of the inidivual size
    >>> of the table. As a table can be "100%", I want the image "100%" and
    >>> not repeated.

    >>
    >> Can't be done in regular HTML/CSS as far as I know. 100% size of an
    >> image, means the image's own original size, not the size of its parent
    >> in the HTML structure.

    >
    > No, it does just mean 100% of the container in the usual way. You can
    > set width or height of an image to 100% provided the width or height of
    > the container doesn't depend on its contents.
    >
    > You can only do this with IMG elements-- background images can't be
    > stretched or resized in CSS 2.1, only tiled and repeated.


    Thanks for the correction, appears I was mixing stuff up.


    --
    Els http://locusmeus.com/
    Els, Jan 8, 2009
    #5
  6. Nicole

    Bergamot Guest

    Nicole wrote:
    > Els wrote:
    >
    >> Really? How? The background image on tanz.or.at is not stretched,
    >> it's repeated. The same way you can repeat it in a table cell or
    >> any other element.

    >
    > Thank you for the link. It is great, but it contains just the usual
    > tags.


    You seem to be stuck on the notion that this is an HTML problem. It
    isn't. Use CSS and it's easy.

    > The image of the link (tanz.or.at) is repeated vertically, but
    > stretched horicontally.


    No, it isn't.
    http://tanz.or.at/images/backgrou.gif

    > I want an image which fades from left to right within a cell.


    So fire up your graphics editor and make an image wide enough for the
    particular gradient you have in mind. It doesn't have to be very high.
    1px will do, though 10 or 20px is better - less work for the browser.
    You can use the above graphic as an example, though it doesn't have to
    be that wide.

    > And this fading shall be visible independently of the inidivual size
    > of the table.


    Piece of cake. Assign a solid background color corresponding to one end
    of the gradient image. The solid color will pick up where the image lets
    off.

    > As a table can be "100%", I want the image "100%" and
    > not repeated.


    You can repeat the image in a way that it *looks* like 100%.

    Say your image gradient goes from white on the left to black on the
    right. The applicable CSS is:

    background: #000 url(gradient.png) repeat-y;

    The background will fill with black with the white end of the gradient
    down the left side. If you want the midpoint of the gradient in the
    center of the element, you can do that, too. Just make the image wider
    and alter the positioning.

    BTW, all this talk of table cell backgrounds makes me think you're using
    last century's methods of web authoring. You aren't still using <font>
    tags, too, are you? If so, you're way behind the times.

    --
    Berg
    Bergamot, Jan 8, 2009
    #6
  7. Nicole

    Andy Guest

    "Nicole" <Wagner> wrote in message news:...

    Hi User,

    I have an image, which I want to be the background of a table and / or
    table-cells.

    e.g. such a table:
    <table width="100%" cellspacing=4 cellpadding=7 border=2>
    <tr><td>&nbsp;</td>
    <th>test 1111111111</th><td>&nbsp;</td>
    <th>test 2222222222</th><td>&nbsp;</td>
    </tr>
    </table>

    To get the image into the background is easy: You just write background=url
    or similar to the td-tag or to the stylesheet.

    The problem comes here:
    I am not able to determine HOW the image is repeated in the single cell.
    "repeat: no repeat" is not done properly.

    And what I am not able to do at all: Draw the image STRETCHED to the
    individual cell in its whole of 100%.

    What I want to do, is a color effect like this:
    http://tanz.or.at/

    But I do not want to apply this 100%-stretch-effect to the background-image
    of the whole site (would be easy), but to the background of just a single
    cell of a table.

    Can somebody give me a hint how to do this?


    Thanks,
    Nicole


    Hi Nicole,

    Good news! it can be done ;)

    This is a little trick that I developed for my site...


    <table cellspacing="0" cellpadding="0" width="100%" height="100%">
    <td width="100%" height="100%">

    <div style="position: relative; top: 0; left: 0; right: 0; bottom: 0; width:
    100%; height: 100%;">
    <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; width:
    100%; height: 100%;">PUT YOUR CELL CONTENT HERE</div>
    <img src="../images/background.gif" width="100%" height="100%"
    galleryimg="no">
    </div>

    </td>
    </table>


    Hope this helps

    Andy
    Andy, Jan 9, 2009
    #7
  8. Nicole

    dorayme Guest

    In article <06F9l.15471$2>,
    "Andy" <> wrote:

    > This is a little trick that I developed for my site...


    How about a demo with a URL that you have tested and are satisfied with?

    --
    dorayme
    dorayme, Jan 9, 2009
    #8
  9. Nicole

    Andy Guest

    "dorayme" <> wrote in message
    news:...
    > In article <06F9l.15471$2>,
    > "Andy" <> wrote:
    >
    >> This is a little trick that I developed for my site...

    >
    > How about a demo with a URL that you have tested and are satisfied with?
    >
    > --
    > dorayme


    OK, I'm visiting my Grandma today (Sat), but when I get back (approx 3pm)
    I'll knock a demo up.

    Andy
    Andy, Jan 10, 2009
    #9
  10. Nicole

    Andy Guest

    "Andy" <> wrote in message
    news:aWZ9l.58563$2...
    >
    > "dorayme" <> wrote in message
    > news:...
    >> In article <06F9l.15471$2>,
    >> "Andy" <> wrote:
    >>
    >>> This is a little trick that I developed for my site...

    >>
    >> How about a demo with a URL that you have tested and are satisfied with?
    >>
    >> --
    >> dorayme

    >
    > OK, I'm visiting my Grandma today (Sat), but when I get back (approx 3pm)
    > I'll knock a demo up.
    >
    > Andy


    Hi,

    It's a bit of a rush job (because I've got a sausage casserole in the oven)
    but here's a link to a demo for all the trolls/haters/doubters...

    http://www.microbuild.com/test/table_bg.html

    Andy
    Andy, Jan 10, 2009
    #10
  11. Nicole

    Els Guest

    Els, Jan 10, 2009
    #11
  12. Nicole

    Andy Guest

    "Els" <> wrote in message
    news:171ubr8v0pqi6$.2pqa9i85d98r$...
    > Andy wrote:
    >>> "dorayme" <> wrote in message
    >>>> "Andy" <> wrote:
    >>>>
    >>>>> This is a little trick that I developed for my site...
    >>>>
    >>>> How about a demo with a URL that you have tested and are satisfied
    >>>> with?

    >
    >> http://www.microbuild.com/test/table_bg.html

    >
    > Same effect in IE6, IE7, and FF3:
    > http://locusmeus.com/temp/stretch.jpg
    >
    > Your method will only work as long as the content is never higher than
    > the set height of the table cell.
    >
    > --
    > Els http://locusmeus.com/



    Oh don't worry about that, I have a far more elegant version on my own site
    that does way more stuff ;) Consider this a "freebie" to help the OP out.

    Andy
    Andy, Jan 10, 2009
    #12
  13. Nicole

    Els Guest

    Andy wrote:

    > "Els" <> wrote in message
    > news:171ubr8v0pqi6$.2pqa9i85d98r$...
    >> Andy wrote:
    >>>> "dorayme" <> wrote in message
    >>>>> "Andy" <> wrote:
    >>>>>
    >>>>>> This is a little trick that I developed for my site...
    >>>>>
    >>>>> How about a demo with a URL that you have tested and are satisfied
    >>>>> with?

    >>
    >>> http://www.microbuild.com/test/table_bg.html

    >>
    >> Same effect in IE6, IE7, and FF3:
    >> http://locusmeus.com/temp/stretch.jpg
    >>
    >> Your method will only work as long as the content is never higher than
    >> the set height of the table cell.

    >
    > Oh don't worry about that, I have a far more elegant version on my own site
    > that does way more stuff ;) Consider this a "freebie" to help the OP out.


    I'll believe it when I see it :)

    --
    Els http://locusmeus.com/
    Els, Jan 10, 2009
    #13
  14. Nicole

    Andy Guest

    "Els" <> wrote in message
    news:1nryoykj8nw22.1j1fh3sqv3p9x$...
    > Andy wrote:
    >
    >> "Els" <> wrote in message
    >> news:171ubr8v0pqi6$.2pqa9i85d98r$...
    >>> Andy wrote:
    >>>>> "dorayme" <> wrote in message
    >>>>>> "Andy" <> wrote:
    >>>>>>
    >>>>>>> This is a little trick that I developed for my site...
    >>>>>>
    >>>>>> How about a demo with a URL that you have tested and are satisfied
    >>>>>> with?
    >>>
    >>>> http://www.microbuild.com/test/table_bg.html
    >>>
    >>> Same effect in IE6, IE7, and FF3:
    >>> http://locusmeus.com/temp/stretch.jpg
    >>>
    >>> Your method will only work as long as the content is never higher than
    >>> the set height of the table cell.

    >>
    >> Oh don't worry about that, I have a far more elegant version on my own
    >> site
    >> that does way more stuff ;) Consider this a "freebie" to help the OP out.

    >
    > I'll believe it when I see it :)
    >
    > --
    > Els http://locusmeus.com/


    http://www.microbuild.com/microbuild/news/website/august 2008 page.html

    Love & Kisses

    Andy
    Andy, Jan 10, 2009
    #14
  15. Nicole

    Bergamot Guest

    Andy wrote:
    > "Els" <> wrote in message
    > news:171ubr8v0pqi6$.2pqa9i85d98r$...
    >> Andy wrote:
    >>>
    >>> http://www.microbuild.com/test/table_bg.html

    >>
    >> Your method will only work as long as the content is never higher than
    >> the set height of the table cell.

    >
    > Oh don't worry about that, I have a far more elegant version on my own site
    > that does way more stuff ;)


    Care to show us?

    > Consider this a "freebie" to help the OP out.


    http://www.bergamotus.ws/screenshots/microbuild.png

    I don't see how that will help the OP.

    --
    Berg
    Bergamot, Jan 10, 2009
    #15
  16. Nicole

    Els Guest

    Andy wrote:

    > "Els" <> wrote in message
    > news:1nryoykj8nw22.1j1fh3sqv3p9x$...
    >> Andy wrote:
    >>
    >>> "Els" <> wrote in message
    >>> news:171ubr8v0pqi6$.2pqa9i85d98r$...
    >>>> Andy wrote:
    >>>>>> "dorayme" <> wrote in message
    >>>>>>> "Andy" <> wrote:
    >>>>>>>
    >>>>>>>> This is a little trick that I developed for my site...
    >>>>>>>
    >>>>>>> How about a demo with a URL that you have tested and are satisfied
    >>>>>>> with?
    >>>>
    >>>>> http://www.microbuild.com/test/table_bg.html
    >>>>
    >>>> Same effect in IE6, IE7, and FF3:
    >>>> http://locusmeus.com/temp/stretch.jpg
    >>>>
    >>>> Your method will only work as long as the content is never higher than
    >>>> the set height of the table cell.
    >>>
    >>> Oh don't worry about that, I have a far more elegant version on my own
    >>> site
    >>> that does way more stuff ;) Consider this a "freebie" to help the OP out.

    >>
    >> I'll believe it when I see it :)


    > http://www.microbuild.com/microbuild/news/website/august 2008 page.html


    The only table cell there with a stretched image that I can find, has
    no text in it, is a fixed height and width, so basically doesn't need
    a stretched image. Am I missing something?
    Oh, and just bump up the font a couple of clicks, see what that does.

    As far as I can see, the OP wanted to stretch an image in a table
    cell, because he does not know the size of the cell - that's why it
    needs to stretch with the cell. Your example doesn't do that I think?

    --
    Els http://locusmeus.com/
    Els, Jan 10, 2009
    #16
  17. Nicole

    dorayme Guest

    In article <15lfm8n2kfnkr$>,
    Els <> wrote:

    > Andy wrote:
    >
    > > http://www.microbuild.com/microbuild/news/website/august 2008 page.html

    >
    > As far as I can see, the OP wanted to stretch an image in a table
    > cell, because he does not know the size of the cell - that's why it
    > needs to stretch with the cell. Your example doesn't do that I think?


    Be careful Els, he blew you kisses but has mentioned grandmas...
    remember the wolf in Little Red Riding Hood? And has bared those teeth
    with his "here's a link to a demo for all the trolls/haters/doubters...".

    Andy originally showed some mark up which did not seem to be anywhere
    near the "good news" he claimed. I am now wondering what the sausage
    casserole he said he had in the oven was like. Recipe please, Andy.

    --
    dorayme
    dorayme, Jan 10, 2009
    #17
  18. Nicole

    Bergamot Guest

    Bergamot, Jan 10, 2009
    #18
  19. Nicole

    rf Guest

    rf, Jan 11, 2009
    #19
  20. Nicole

    Andy Guest

    "Bergamot" <> wrote in message
    news:...
    >
    > Andy wrote:
    >> "Els" <> wrote in message
    >> news:171ubr8v0pqi6$.2pqa9i85d98r$...
    >>> Andy wrote:
    >>>>
    >>>> http://www.microbuild.com/test/table_bg.html
    >>>
    >>> Your method will only work as long as the content is never higher than
    >>> the set height of the table cell.

    >>
    >> Oh don't worry about that, I have a far more elegant version on my own
    >> site that does way more stuff ;)

    >
    > Care to show us?
    >
    >> Consider this a "freebie" to help the OP out.

    >
    > http://www.bergamotus.ws/screenshots/microbuild.png
    >
    > I don't see how that will help the OP.
    >
    > --
    > Berg


    Listen Guys & Gals,

    I'm aware that the rough code I submitted doesn't stand up to your exacting
    standards, it was only a rushed example of how the OP's request could be
    done. All I wanted to do was to show her that what others were telling her
    was impossible to do was in fact accomplishable. I didn't want to do the
    whole job for her as part of the learning process is to discover the
    solutions for yourself so I just wanted to show her one possible road to a
    solution... nothing more.

    Clam down brothers and sisters, we're all the same species :)

    Andy
    Andy, Jan 11, 2009
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    9
    Views:
    521
    CBFalconer
    Apr 25, 2006
  2. jc
    Replies:
    3
    Views:
    1,711
  3. jc
    Replies:
    1
    Views:
    1,351
    Neredbojias
    Mar 19, 2008
  4. Dj Frenzy
    Replies:
    3
    Views:
    292
    Robert
    Feb 10, 2004
  5. Replies:
    5
    Views:
    100
    Richard Cornford
    Feb 24, 2006
Loading...

Share This Page