Fixed background

bbthemelab · 02-18-2011

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)

bbthemelab · 02-18-2011

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.

SumiGhosh · 09-20-2011

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.

colforbin13 · 03-21-2011

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

bbthemelab · 02-18-2011

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...

bbthemelab · 02-18-2011

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!!!

swcrusade · 03-01-2012

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.

Web and WebWorks Development

Fixed background

Re: Fixed background

Re: Fixed background

Re: Fixed background

Re: Fixed background

Re: Fixed background

Re: Fixed background