HTML - background/border img

Discussion Forums > WebViews and HTML for Mobile

Replies: 13 Views: 119

bcJames Aspiring developer Posts: 10 Reg: Aug 27, 2012 Bedford, MA 2,450	confirm \| cancel 08/30/12 10:25 AM (13 years ago) HTML - background/border img What I would ultimately like to happen is to have a background/border img (.png) with a transparent middle and have text scroll behind it... any suggestions on how I might make this happen? Title Comments What I would ultimately like to happen is to have a background/border img (.png) with a transparent middle and have text scroll behind it... any suggestions on how I might make this happen?

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/30/12 10:52 AM (13 years ago) Have you googled it? Comments Have you googled it?

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	08/30/12 11:02 AM (13 years ago) I don't think you can have text scroll "behind" a background image because the image is..well..in the background! But, I bet there is a CSS solution to this, and I bet Googling it as Fred suggests will find the answer! Mark Comments I don't think you can have text scroll "behind" a background image because the image is..well..in the background! But, I bet there is a CSS solution to this, and I bet Googling it as Fred suggests will find the answer! Mark

andydahl Aspiring developer Posts: 209 Reg: Jul 20, 2011 Villa Grove 4,540	08/30/12 11:16 AM (13 years ago) If I understand you correctly, it's pretty easy. Just set your HTML doc (that you'll add to Xcode or Eclipse) to have a transparent background via CSS. Then add a background image to the screen in BuzzTouch. This, effectively gives you a static background. At least this is the way I accomplish it. Comments If I understand you correctly, it's pretty easy. Just set your HTML doc (that you'll add to Xcode or Eclipse) to have a transparent background via CSS. Then add a background image to the screen in BuzzTouch. This, effectively gives you a static background. At least this is the way I accomplish it.

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/30/12 11:51 AM (13 years ago) Depends on BTv1.5 or BTv2.0 and iOS or Android. Comments Depends on BTv1.5 or BTv2.0 and iOS or Android.

bcJames Aspiring developer Posts: 10 Reg: Aug 27, 2012 Bedford, MA 2,450	08/30/12 01:05 PM (13 years ago) BELAY this... it doesn't work. This was for a BT2.0... After taking the advice given here I found a workable solution... however, doesn't give me the clarity and size uploading a background image would... also concerned how it might appear on a tablet along with the spacing... <html> <head> <style type="text/css"> img { position:fixed; float:right; left:0px; top:0px; z-index:1; } </style> </head> <body> <img src="image.png" width="100%" height="100%" /> <p> This is some text. This is some text. This is some text. </p> </body> </html> Comments BELAY this... it doesn't work. This was for a BT2.0... After taking the advice given here I found a workable solution... however, doesn't give me the clarity and size uploading a background image would... also concerned how it might appear on a tablet along with the spacing... <html> <head> <style type="text/css"> img { position:fixed; float:right; left:0px; top:0px; z-index:1; } </style> </head> <body> <img src="image.png" width="100%" height="100%" /> <p> This is some text. This is some text. This is some text. </p> </body> </html>

bcJames Aspiring developer Posts: 10 Reg: Aug 27, 2012 Bedford, MA 2,450	08/30/12 01:12 PM (13 years ago) Never mind... this doesn't work... Comments Never mind... this doesn't work...

GoNorthWest buzztouch Evangelist Posts: 8197 Reg: Jun 24, 2011 Oro Valley, AZ 1,000,000	08/30/12 01:15 PM (13 years ago) Looks like that would work perfectly! Great job! Scaling the image will indeed be an issue, especially given the number of screen sizes out there these days. You can add something into your HTML header that will select a CSS file based on screen size. And in the individual CSS files you can specify the correct image. Here's what it might look like: <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> </head> Mark Comments Looks like that would work perfectly! Great job! Scaling the image will indeed be an issue, especially given the number of screen sizes out there these days. You can add something into your HTML header that will select a CSS file based on screen size. And in the individual CSS files you can specify the correct image. Here's what it might look like: <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"> <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> </head> Mark

Crown Solutions Aspiring developer Posts: 463 Reg: Nov 11, 2011 MN 13,480	08/30/12 02:16 PM (13 years ago) I just built an HTML page with text on a semi-transparent background. I used a table and styled it in CSS. set background color and opacity and set table width to a % so it scales correctly on multiple devices. Here is a screenshot- https://dl.dropbox.com/u/33324452/Photo%20Aug%2025%2C%208%2014%2042%20PM.png Is that close to what you are looking for? Another option would be to make the table a certain width or height and position it so it appears to be within the border of the background image. This would take some trial and error to get the correct size and padding based on the background. If you go that route it may be easier if you lock rotation. Comments I just built an HTML page with text on a semi-transparent background. I used a table and styled it in CSS. set background color and opacity and set table width to a % so it scales correctly on multiple devices. Here is a screenshot- https://dl.dropbox.com/u/33324452/Photo%20Aug%2025%2C%208%2014%2042%20PM.png Is that close to what you are looking for? Another option would be to make the table a certain width or height and position it so it appears to be within the border of the background image. This would take some trial and error to get the correct size and padding based on the background. If you go that route it may be easier if you lock rotation.

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/30/12 02:30 PM (13 years ago) I think it would be helpful to know if your using the: Custom HTML / Text plugin or HTML Doc Plugin Fred Comments I think it would be helpful to know if your using the: Custom HTML / Text plugin or HTML Doc Plugin Fred

bcJames Aspiring developer Posts: 10 Reg: Aug 27, 2012 Bedford, MA 2,450	08/30/12 05:34 PM (13 years ago) I am using Custom HTML / Text... and this is what I had in mind... and the text would scroll behind the image... http://i1268.photobucket.com/albums/jj564/brandanjc/d125d458.png Comments I am using Custom HTML / Text... and this is what I had in mind... and the text would scroll behind the image... http://i1268.photobucket.com/albums/jj564/brandanjc/d125d458.png

Fred@mySkylla com Android Fan Posts: 5259 Reg: Oct 03, 2011 location unknow... 62,560	08/30/12 05:57 PM (13 years ago) Have you tried background image in the screen settings? Comments Have you tried background image in the screen settings?

Crown Solutions Aspiring developer Posts: 463 Reg: Nov 11, 2011 MN 13,480	08/30/12 06:15 PM (13 years ago) sorry, now I understand. You need to change the z position like this- A -1 would put it behind the text, the 1 stacks it. img { position:absolute; left:0px; top:0px; z-index:1; } Comments sorry, now I understand. You need to change the z position like this- A -1 would put it behind the text, the 1 stacks it. img { position:absolute; left:0px; top:0px; z-index:1; }

Crown Solutions Aspiring developer Posts: 463 Reg: Nov 11, 2011 MN 13,480	08/30/12 06:28 PM (13 years ago) I just read your post again saying this didn't work, This just worked for me- <!DOCTYPE html> <html> <head> <style type="text/css"> img { position:absolute; left:0px; top:0px; z-index:1; } </style> </head> <body> <h1>This is headding text behind the boarder</h1> <img src="https://dl.dropbox.com/u/33324452/boarder1.png" width="100%" height="100%" /> <p>Smaller Text in the body. Smaller text in the body.</p> </body> </html> Comments I just read your post again saying this didn't work, This just worked for me- <!DOCTYPE html> <html> <head> <style type="text/css"> img { position:absolute; left:0px; top:0px; z-index:1; } </style> </head> <body> <h1>This is headding text behind the boarder</h1> <img src="https://dl.dropbox.com/u/33324452/boarder1.png" width="100%" height="100%" /> <p>Smaller Text in the body. Smaller text in the body.</p> </body> </html>

Login + Screen Name Required to Post Login to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.

Discussion Forums > WebViews and HTML for Mobile

HTML - background/border img

Title

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments