Background images

How does one keep a background image from tiling?  Mainly I'm looking for in a table cell, but a for a main background image would work as well.
GeosAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
HooliganConnect With a Mentor Commented:
<style type="text/css">
<!--
body {background-image: url(yourImg.jpg); background-repeat: no-repeat}
-->
</style>

<body>


that places the background image in the upper left of the screen.

if you replace no-repeat with repeat-x it tiles it horizontilly only
repeat-y same thing but vertically.

Works in Ie4.0 and netscape 4.6, don't know about any other browsers or versions though.
0
 
chewymonCommented:
As long as it is listed as <body background="some.gif"> it will tile.  The following line is from the html quick reference.



BACKGROUND="..."--Specifies an image to be tiled as background

0
 
chewymonCommented:
My HTML Sourcebook by Dr. Ian Graham says the same thing about using BACKGROUND in <TD>
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
GeosAuthor Commented:
Hmmm...so the only way to have a background not tile is to make the image's canvas large enough to cover what I want.
0
 
TTomCommented:
Yep.

Tom
0
 
mgfranzCommented:
I believe you can use a style sheet reference to locate a background image, but then again, the only way I know of to NOT have the image repeat, is either locate the image and Zindex it to 0, or put it in a <td> tag and layer it, (NN)

Mark
0
 
mgfranzCommented:
Hooligan, just to follow up on what you propose, you can also locate the background image in the style sheet by using the background-position: attribute, i.e. with your example;

<style type="text/css">
<!--
body {background-image: url(yourImg.jpg); background-repeat: no-repeat; background-position: center top}
-->
</style>

You can also specify percentages, length, left, right, center and bottom.

Reference: http://www.w3.org/TR/REC-CSS1#background-position

Mark

P.S. The position tag does not work with NN 4+
0
 
GeosAuthor Commented:
Any tips on how that would work on a cell?
0
 
mgfranzCommented:
yeah, just set the background color or image of the cell either with a style sheet or inside of the cell tag;

<td background="image.gif"> IE only
<td bgcolor="#dd00ff"> All browsers

<td style="background:image.gif"> Again, IE only...

Mark
0
All Courses

From novice to tech pro — start learning today.