Stopping images from tiling.

[Adrian Douglas]

I'm trying to figure how to use a background image in a table cell and stop it from tiling. Is there any html code that does this? I'm trying to get a small image in the lower right corner of a table cell to brighten up the page.

[Keith Loh]

You can use .css to fix the position of the background image.

body {
background: url(graphic.jpg) fixed no-repeat;
}

Make sure the edges of the graphic are the same colour as the background colour for the page or it will look funny.

The easier way is to make the background image larger than the cel otherwise it will always repeat if the cel is larger than the image.

[Adrian Douglas]

Thanks Keith, does that work for table cells or just the body of the entire page.

I'll give it a try and see how it goes.

[Mark Newhouse]

You can apply a background image to just about any element in modern browsers, and set them to not repeat, etc.

It sounds like you want to target just one cell in your table. Id give that TD and id and in the CSS make a rule like:

td#notile {
background: url(graphic.jpg) no-repeat;
}

You don't need want the "fixed" part unless you want the image to remain stationary on the page (not scroll). The no-repeat is what keeps it from tiling.

Then in the HTML the markup for that table cell would look something like:

<td id="notile">Cell contents</td>

Hope this helps!

[Keith Loh]

//You don't need want the "fixed" part unless you want the image to remain stationary on the page (not scroll). The no-repeat is what keeps it from tiling.//

Good correction. I was doing this last night and didn't cut it out of my example.

[Mark Newhouse]

Heh. CSS and web design is my area of expertise, so that is why I had to jump in (not to correct, but to help out), since I don't have much to add to anything DV related. Yet.

Best,

[Adrian Douglas]

Thanks to both of you. I'll see how I go today. I really haven't kept up with my web work that much here in Japan so I really appreciate your input.

What about positioning? The default is top left of the cell but I want it in the bottom right.

[Jon Yurek]

Then you can actually just add "bottom right" to the CSS entry.

td.notile {
background: url(graphic.jpg) no-repeat bottom right;
}

Should put it right where you want.

[Adrian Douglas]

Thanks guys, I fired up Dreamweaver MX and low and behold there it was.