Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Highlighted
Contributor
Posts: 47
Registered: ‎02-18-2011
My Device: Not Specified
Accepted Solution

Fixed background

For the life of me I can not figure this out!!!

 

I have an image that I want to be my background, I want it fixed. Then I want a div to be able to scroll over that.

 

Here is my .html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>

<meta name="viewport" id="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no" />
	<meta id="touch-event-mode" content="native"/>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
    	<script type="text/javascript" src="script.js"></script>

</head>

<body>
	<div id="main">
	  <p>345</p>
	  <p>3</p>
	  <p>6dsf54</p>
	  <p>yr</p>
	  <p>hbse</p>
	  <p>g</p>
	  <p>45</p>
	  <p>b</p>
    </div>
</body>
</html>

*** I took out a lot of P tags because I think you get the idea. 

 

 

 

Here is my StyleSheet

body {
	background-attachment:fixed;
	background-image: url(background.png);
	background-repeat:no-repeat;
	height:1024px;
	width:600px;

}
#main{
}

 

 

Can anyone PLEAAAAE help me?

 

 

 

This app will be for the PlayBook. I am coding it with webworks... (obvi)

Contributor
Posts: 47
Registered: ‎02-18-2011
My Device: Not Specified

Re: Fixed background

Also, I would love so there is no scroll bar and no grey area when scrolling to the very top/bottom.

sample code would be GREATLY appreciated.
Developer
Posts: 435
Registered: ‎09-20-2011
My Device: Z10 LE, Playbook, DevAlpha C, 9900, 9380
My Carrier: Vodafone

Re: Fixed background

Are you working with dual mode or either(portrait or landscape).

 

If you are working with landscape change meta tag value for device-width by 1024 and height by 600 and vice versa for portrait.

 

What exactly problem with the png image. What is the resolution of the png image.

Developer
Posts: 28
Registered: ‎03-21-2011
My Device: Torch 9800
My Carrier: AT&T

Re: Fixed background

This is what I use in my CSS to set the background.  This will also allow your app to size to different screen resolutions, and still not scroll with the content.

 

 

html {
  background: url(background.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

 You can see the example from css-tricks.com (where I found this) here: http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

 

------------------------------------
Twitter: @ChiSoxRunner
Script. Bake. Run.
Contributor
Posts: 47
Registered: ‎02-18-2011
My Device: Not Specified

Re: Fixed background

that CSS code did not work. Basically it back te background image REALLY tall, and it scrolls when I swipe my hand up/down.

 

Also, when I get to the bottom, it shows the grey. 

 

This is a pretty good example of what I am trying to do.

 

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Disable-scrolling-and-the-grey-b...

Contributor
Posts: 47
Registered: ‎02-18-2011
My Device: Not Specified

Re: Fixed background

I figured it out!!!

 

I created two divs. One divs, one scrollable.. this is what my HTML file looks like...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!-- The new doctype -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /> 
    	<script type="text/javascript" src="script.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0,user-scalable=no, maximim-sclae=1.0, height=1024, width=600" /></head>
<body>

<div style="background-attachment:fixed !important; background-image: url(background.png) !important; background-repeat:no-repeat !important; height:1024px; width:600px; top:0px; left:0px; position:fixed;"></div>


<div style="overflow:scroll; width:600px; height:1024px; top:0px; left:0px; position:absolute; z-index:500px;">
TOP!!!!!!!!!!!!!!!!<br />
dsgfafsas<br />
sdf<br />
sa<br />
fs<br />
fgew g<br />
3<br />
5by24<br />
ynb45<br />
6b23<br />
yn4b<br />
y hw4egh<br />
 463jh<br />
 4 g<br />
 5nh<br />
 53hg 4<br />
  b5y<br />
  j54<br />
  hg 4r <br />
  hj 45 <br />
  hg4<br />
  h 4h<br />
  4tg<br />
   34<br />
   g4 <br /><br />
   h42<br />
sa<br />
fs<br />
fgew g<br />
3<br />
5by24<br />
ynb45<br />
6b23<br />
yn4b<br />
y hw4egh<br />
 463jh<br />
 4 g<br />
 5nh<br />
 53hg 4<br />
  b5y<br />
  j54<br />
  hg 4r <br />
  hj 45 <br />
  hg4<br />
  h 4h<br />
  4tg<br />
   34<br />
   g4 <br /><br />
   h42<br />
sa<br />
fs<br />
fgew g<br />
3<br />
5by24<br />
ynb45<br />
6b23<br />
yn4b<br />
y hw4egh<br />
 463jh<br />
 4 g<br />
 5nh<br />
 53hg 4<br />
  b5y<br />
  j54<br />
  hg 4r <br />
  hj 45 <br />
  hg4<br />
  h 4h<br />
  4tg<br />
   34<br />
   g4 <br /><br />
   h42<br />
   g2yn<br />
   4b<br />
   hgy<br />
   t243ny<br />
   4h2yg<br />
   46yhb<br /><br />
   g4y2<br />
   3fy<br />
   n34h<br />
   yg<br />
   BOTTOM!!!!!!!!!!!!!!!!!


</div>



</body>
</html>

 The background div stays fixed. The other div scrolls amazingly and does not show the scrollbar and does not show grey! WIN!!!

New Developer
Posts: 7
Registered: ‎03-01-2012
My Device: Playbook + 9900 + Z10 + Z30 + Leap
My Carrier: Telus

Re: Fixed background

[ Edited ]

I am using html and designing this app for landscape if that info helps.

 

When I test my basic little app in Ripple, I do not see grey scroll bars, or see a grey back ground when moving around the pages.  When I test it in vmware player, I see thin grey scroll bars on the bottom and right side of the screen, and when I move around the screen, a grey background appears behind my app.  I looked at previous posts on this forum, but the code that worked above, does not seem to work for me.  Below is what I have reverted back to.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#000000" text="#FFFFFF">
<p><img src="TheThinkers_Playbook.jpg" width="1024" height="600" border="0" usemap="#Map">
  <map name="Map">
    <area shape="rect" coords="205,544,325,584" href="news.html" target="_self" alt="News">
    <area shape="rect" coords="339,544,570,586" href="001.html" target="_self" alt="First">
    <area shape="rect" coords="582,545,841,585" href="029.html" target="_self" alt="Latest">
  </map>
</p>
</div>
</body>
</html>

 

I tried working with one of the suggested css stylesheets, but that did not help either.  Any ideas? I am hoping this is pretty basic, but I cannot find anything other then this post.