Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

fixed background problem

Status
Not open for further replies.
lucidtech

lucidtech

IS-IT--Management
Jan 17, 2005
267
US
I have setup a fixed background in the body of my pages, and the background is a somewhat large image file. It works, but when you scroll the scrolling is choppy.. not smooth at all. Is this because the image is so large? Is there a way around it?
 
Sort by date Sort by votes
Sorry, guess I should have tested this first, but I set the background to a very small (10 kb) image and it is still choppy....

Here is my CSS and HTML

Code: 
***CSS***
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#000000;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	background-image:url(../assets/nav_temp.jpg);
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:center;
}
#text_container {
	position:relative;
	width:750px;
	text-align:justify;
	top:140px;
	left:195px;
	background-image:url(../assets/div_bg2.png);
	background-repeat:no-repeat;
	padding:20px;
	font-size:11px;
	color:#CCFFFF;
	z-index:2;
}
#content {
	background-image:url(../assets/container_border.png);
	background-repeat:repeat-y;
	/*background-attachment:fixed;
	background-position:center;*/
	text-align:left;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	width:984px;
	margin-top: 0px;
}
.page_header {
	position:absolute;
	background-image:url(../assets/background3.jpg);
	top:0px;
	left:0px;
	width:980px;
	height:160px;
	z-index:1
}

***HTML***
<body>
<div class="content" id="content" style="height:900px;">
	<div class="page_header"></div>
	<div class="header_image"></div>
	<div class="top_login">
		<cfinclude template="CFM/top_nav.cfm">
	</div>
	<div class="left_nav_bar">
		<cfinclude template="CFM/left_nav.cfm">
	</div>
	<div class="text_container" id="text_container" style="height:700px;"></div>
	<div class="text_container_content" id="text_container_content">
	
		<div class="welcome_message">
			<cfinclude template="CFM/welcome_content.cfm">
		</div>
		<div class="news">
			<cfinclude template="CFM/news_feed.cfm">
		</div>
		<!---<div class="paypal_logo">
			<cfinclude template="CFM/paypal_logo.cfm">
		</div>--->
		<div class="members_info">
			<cfinclude template="CFM/members_info.cfm">
		</div>
		<div class="new_users">
			<cfinclude template="CFM/new_users_content.cfm">
		</div>
		<div class="new_characters">
			<cfinclude template="CFM/new_characters_content.cfm">
		</div>
		
		<div class="page_footer" style="top:700px;"></div>
	</div>
</div>
</body>
 
Upvote 0 Downvote
Yes, when I set the background to anything other than "fixed" the scroll problem goes away, but I desperately want a fixed background. Can anyone help?
 
Upvote 0 Downvote
I've never had a good experience with fixed background images to be honest - the browser has to do a lot more work in rendering the page when scrolling, thus the "jumpy" appearance.

Personally, I'd ditch it if it's causing grief, or perhaps use a JS solution instead (to auto-position an absolutely positioned DIV at 0,0 regardless of the scroll position)... but I'd ask in forum216 about this one.

Hope this helps,
Dan





Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
703
3esolar
3
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
637
PeDa
PeDa
Krus1972
  • Locked
  • Question
Centering Content Within a Fixed Navigation Menu
Replies
10
Views
223
ChrisHirst
ChrisHirst
lupidol
  • Locked
  • Question
CSS: How can I keep the header of an HTML table fixed while scrolling the page?
Replies
4
Views
143
jbenson001
jbenson001
garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
133
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top