Ok Very BASIC .NET Question

Ok to all the WASABI guru's out there that complain there is too much Biztalk on Wasabi.

Is there a way I can place a text over an image in ASP.NET ?

I tried several things. But let me explain a little.......

I have a picture say 3 pixels wide and 200 pixels long, quite like a cigarette. The picture itself is a gradient going from white to blue or whatever colors you fancy. The problem is that only an image control can stretch the image horizontal and repeat vertical.

I want to place text over this image and keep the gradient intact ( where the gradient is stretched over the full 1024 pixels).

I can do this by drawing a table of one cell and give it a background picture. Then put a label in this table and voila. Problem is the image doesn't stretch.

I have seen zillions of solutions that generate an image with the text in it, but after a screen resize it looks really afwull. How hard can it be to put some text on an image ?

I also tried stuff with

and that worked but then I had to absolutely position the control making it useless for my project.
Tried the CSS but couldnt find what Í was looking for.

Is there any ASP.NET guru/Stylesheet Guru/GuruGuru that can help ?

 

Published 11-09-2004 9:29 AM by Patrick Wellink
Filed under:

Comments

# re: Ok Very BASIC .NET Question

Tuesday, November 09, 2004 9:47 AM by Patrick Wellink
I'd like to know more about the stretching. Why and when does it stretch? Why is it so important?

I know with javascript you can get the width of the browser and use it to postback to the server, draw the image with that information, but that's a sucking solution.

I don't know exactly how you can use an image as background in a table and make it stretch along with the table width. Maybe it's easy, dunnow exactly. Then you place some text inside the table and done. I think that's the best solution, because using the width of the browser for the width of the picture isn't hard, but probably a lousy solution.

# re: Ok Very BASIC .NET Question

Tuesday, November 09, 2004 10:00 AM by Patrick Wellink
Well if you have a very small picture as a basis the webpage remains fast if you have limited bandwith. Also if the same picture is used everywhere caching can be effective !

If you generate it all the time over and over again caching is impossible and the webserver would be generating pictures all the time instead of serving webpages.

That's why i want the image to stretch

# re: Ok Very BASIC .NET Question

Tuesday, November 09, 2004 11:20 AM by Patrick Wellink
Have a look at CSS relative/absolute positioning documentation.

# re: Ok Very BASIC .NET Question

Tuesday, November 09, 2004 11:56 AM by Patrick Wellink
I will,

But as you mention this you probably have a clou how to fix it........

Are you absolutely shure you can fix it with this or is it yust a guess

And if you are absolutely sure please gimme some more help.......

# re: Ok Very BASIC .NET Question

Wednesday, November 10, 2004 10:16 AM by Patrick Wellink
I see gradient.. I see text.. Why don't you use DX filters in your css classes? Works perfect in IE. If you are doing a intranet site then this works perfect. I used a DX filter to get the gradient and on top of that a generated gif image that contains the text with the fonttype you want to use. If you are using a font that the client already has then you can even forget the image rendering.

# re: Ok Very BASIC .NET Question

Wednesday, November 10, 2004 1:33 PM by Patrick Wellink
Can you paste a sample here ????

# re: Ok Very BASIC .NET Question

Thursday, November 11, 2004 8:03 AM by Patrick Wellink
Patrick, have a look at this link. It describes the use of DX-Filters in ASP.Net:
http://www.developer.be/index.cfm/fuseaction/tutorialDetail/GroupID/78.htm

# re: Ok Very BASIC .NET Question

Thursday, November 11, 2004 8:11 AM by Patrick Wellink
This link is more detailed on opacity and gradients: http://www.codeproject.com/books/learnsvgchapter07.asp

# re: Ok Very BASIC .NET Question

Thursday, November 11, 2004 8:15 AM by Patrick Wellink
Hmmm, remove that last link. Useless

# re: Ok Very BASIC .NET Question

Thursday, November 11, 2004 9:15 AM by Patrick Wellink
Let's try it with simle DHTML:

<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<style type="text/css">
.bgimg
{
width: 100%;
height: 100%;
}
.bgdiv
{
z-index: auto;
position: absolute;
top: 0px;
left: 0px;
width: 102%;
height: 200%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.topdiv
{
z-index: auto;
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 100%;
margin: 0 0 0 0;
}
</style>
</head>
<body>
<div class="bgdiv"><img class="bgimg" src=sub-verloopbalk.gif></div>

<div class="topdiv">ernst is een toffe gozer die het wel even met DHTML oplost.</div>
</body>
</html>
</pre>

# re: Ok Very BASIC .NET Question

Thursday, November 11, 2004 9:27 AM by Patrick Wellink
Of course you must leave out the PRE tags...

# re: Ok Very BASIC .NET Question

Thursday, November 11, 2004 12:57 PM by Patrick Wellink
Thanks Guys,

That IS a help. Not that I will use it but it has pushed me to the right direction.

Thanks for all your care !!!!!!