By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,484 Members | 1,044 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,484 IT Pros & Developers. It's quick & easy.

stretching the background image instead of tiling

P: n/a
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.
Nov 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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;
}

Nov 23 '05 #2

P: n/a
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;
}

Nov 23 '05 #3

P: n/a
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;
}

Nov 30 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.