stretching the background image instead of tiling

[Sridhar]

Hi,

I have created a user control which has the html code as follows
<TABLE id="ToolBarTable" cellSpacing="0" cellPadding="0" width="100%"
border="0">
<tr>
<td align="right" bgColor="#000000"><IMG src="../Images/image1">
</td>
</tr>
<TR>
<TD id="mastHead" runat="server">
<asp:Label id="lHeading" runat="server" CssClass="header"></asp:Label></TD>
</TR>
</TABLE>

In the Page_Load method I am setting the properties of mastHead column like
this

Me.mastHead.Attributes.Add("background",
"../images/mastheads/masthomedefault.jpg")
Me.mastHead.Attributes.Add("height", "101")
Me.mastHead.Attributes.Add("width", "100%")

'* Handles the Heading label
Me.lHeading.Text = "This could be the Company Name"

Now the problem is if the width of a table is larger than the image width,
it is tiling the background image. I would like the background image to be
stretched instead of tiling it? Is there a property to do that? Or is there
any other way to do this?

Thanks,
Sridhar.

[yubyub]

You should try CSS to set the background image. Then you can tell the
browser whether to tile, stretch, or use fixed placement for the image
without modifying your code.

Here's an example of tiling horizontally:

TD
{
background-image: url(someimage);
background-repeat: repeat-x;
}

[Sridhar]

Hi,

I have tried that. If the size of a table cell exceeds the size of image,
then it is repeating(tiling) the image. I need to stretch the image instead
of repeating it like in <img> tag if the width of image is 1000 and if I set
the width to 1300 it will stretch the image. Is there a css property to do
that?

Thanks,
Sridhar.

"yubyub" wrote:

You should try CSS to set the background image. Then you can tell the
browser whether to tile, stretch, or use fixed placement for the image
without modifying your code.

Here's an example of tiling horizontally:

TD
{
background-image: url(someimage);
background-repeat: repeat-x;
}

[Mats Lycken]

I'm afraid there isn't one that does that.
One way to do it is to use absolute position to put an image behind the
table and resize it.
A probably better solution is to center the background image in the table.
Use the following css rules to center the image and stop if from repeating:

background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;

Best regards,
Mats

Sridhar wrote:

Hi,

I have tried that. If the size of a table cell exceeds the size of image,
then it is repeating(tiling) the image. I need to stretch the image instead
of repeating it like in <img> tag if the width of image is 1000 and if I set
the width to 1300 it will stretch the image. Is there a css property to do
that?

Thanks,
Sridhar.

"yubyub" wrote:

You should try CSS to set the background image. Then you can tell the
browser whether to tile, stretch, or use fixed placement for the image
without modifying your code.

Here's an example of tiling horizontally:

TD
{
background-image: url(someimage);
background-repeat: repeat-x;
}