<asp:Panel runat="server" HorizontalAlign="Center">
<img alt="" src="Background_Content.png" style="width:90%;" />
Some Text
</asp:Panel>
I need to be able to have the text and the image tag overlap below the text like a background while also being able to "stack" more content below without messing with any absolute or relative positioning. The closest thing I could think of to describe this
would be to use the CSS3 property background-size to stretch a background over the asp:Panel, but no browsers support CSS3. Is there any way to do this?
Yeah, pretty much. I just need to stretch the background image, and I don't think there's a way to do that with CSS2.1, so I have the image tag and I'm trying to fake a stretched background image. That's the difficult part.
It doesn't stretch on Firefox, Opera, or IE. All it does is make one image in the corner, or if you set tiling on, tiles the image, not actually stretches it. Regardless, I have decided to simply do away with the image because it was causing so much trouble,
but thanks anyway. -Zane Kaminski
until css 3.0 support, the best you can do is design the image to repeat (tile). or you could use javascript to get the size of the div, and have the server generate an image that size.
xyzz1233
Member
6 Points
17 Posts
Making a Background Image Stretch to its Parent Tag
Mar 02, 2009 02:06 AM|LINK
I've got some markup that looks like this:
<asp:Panel runat="server" HorizontalAlign="Center"> <img alt="" src="Background_Content.png" style="width:90%;" /> Some Text </asp:Panel>I need to be able to have the text and the image tag overlap below the text like a background while also being able to "stack" more content below without messing with any absolute or relative positioning. The closest thing I could think of to describe this would be to use the CSS3 property background-size to stretch a background over the asp:Panel, but no browsers support CSS3. Is there any way to do this?
Thanks so much for your help!
-Zane Kaminski
CSS3 CSS ASP.NET asp:Panel Style Background
xyzz1233
Member
6 Points
17 Posts
Re: Making a Background Image Stretch to its Parent Tag
Mar 02, 2009 05:52 PM|LINK
Anyone have any ideas? I'd really appreciate if someone could help. Thanks!
NC01
All-Star
82577 Points
15430 Posts
MVP
Re: Making a Background Image Stretch to its Parent Tag
Mar 02, 2009 06:51 PM|LINK
I don't quite understand what you mean, but is it something like this?
<div id="testDiv" style="background-image:url(Images/YourImage.gif)">
testDiv content
</div>
NC...
xyzz1233
Member
6 Points
17 Posts
Re: Making a Background Image Stretch to its Parent Tag
Mar 02, 2009 11:15 PM|LINK
Yeah, pretty much. I just need to stretch the background image, and I don't think there's a way to do that with CSS2.1, so I have the image tag and I'm trying to fake a stretched background image. That's the difficult part.
NC01
All-Star
82577 Points
15430 Posts
MVP
Re: Making a Background Image Stretch to its Parent Tag
Mar 03, 2009 11:13 AM|LINK
The example that I posted stretches completely across the page, at least it did for me.
NC...
xyzz1233
Member
6 Points
17 Posts
Re: Making a Background Image Stretch to its Parent Tag
Mar 04, 2009 08:17 PM|LINK
jmiller6587
Member
4 Points
2 Posts
Re: Making a Background Image Stretch to its Parent Tag
Dec 07, 2009 03:07 PM|LINK
I have the same problem - with the background on a master page. Did you ever figure it out?
thanks!
bruce (sqlwo...
All-Star
36822 Points
5441 Posts
Re: Making a Background Image Stretch to its Parent Tag
Dec 07, 2009 03:42 PM|LINK
until css 3.0 support, the best you can do is design the image to repeat (tile). or you could use javascript to get the size of the div, and have the server generate an image that size.
jmiller6587
Member
4 Points
2 Posts
Re: Making a Background Image Stretch to its Parent Tag
Dec 14, 2009 05:06 PM|LINK
Thanks for the prompt reply - I'm a novice with Java script, you wouldn't happen to have an example would you?
thanks!
sumadevu
Member
2 Points
1 Post
Re: Making a Background Image Stretch to its Parent Tag
Apr 30, 2012 11:38 AM|LINK