View Full Version : background image getting cut short in a overflow:scroll; div in Firefox

01-28-2009, 10:06 PM
hi, i have a div with a background of attachment: fixed;, and a div with "overflow: scroll" to get a scrolling window for my text and images. but in Firefox, the background image gets cut off. i was wondering what i could do to fix it. any help greatly appreciated because i looked over my code and dont see any errors. thank you again. derek

here is the page im talking about.


here is the css to the page

@charset "utf-8";
/* CSS Document */

body {
margin: 0; /* clear for browsers */
padding: 0;
background-color: #517E86;
#container {
position: relative;
margin: 0 auto 0 auto;
width: 800px;
height: autox;
border: solid 3px black;


#header {
background-image: url(header.gif);
background-repeat: no-repeat;
width: 800px;
height: 96px;
#navigation {

width: 800px;
height: 20px;


#imgnavigation {
width: 800px;
height: 122px; /* images height*/
background-color: #ffffff;



#imgnavigation img {

display: inline:

float: left;
margin-left: 7px;

#textbox {
background-image: url(images/textbox.gif);
background-repeat: no-repeat;
background-attachment: fixed;
width: auto;
height: 250px;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 5em;
overflow: scroll;

#textbox img {
margin: 5px;

#footer {
overflow: auto;
width: 100%;
text-align: center;

and here is the html/css to the page. the scrollbox is at the bottom.

<!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">
<link href="doctor_style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<style type="text/css">
.style2 {
font-size: 13px

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;


#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
background-color: #517e86; /*makes background color of dropdown blue*/

#dropmenudiv a:hover{ /*hover background color*/
background-color: #000000; /* makes hover color black*/

a:link {color: #ffffff;}
a:visited {color: #ffffff;}
a:hover {color: #ffffff;}
a:active {color: #ffffff;} /* make all links white */

.style3 {
font-size: x-large

<script type="text/javascript">

* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="meet_the_staff.html#specialists">Specialists</a>'
menu1[1]='<a href="meet_the_staff.html#endodontist">Endodontist</a>'
menu1[2]='<a href="meet_the_staff.html#periodontist">Periodontist</a>'
menu1[3]='<a href="meet_the_staff.html#ceramist">Ceramist/Dental Technician</a>'
menu1[4]='<a href="meet_the_staff.html#hygiene">Dental Hygiene/ Preventative Dentistry Staff</a>'
menu1[5]='<a href="meet_the_staff.html#assistants">Dental Assistants</a>'
menu1[6]='<a href="meet_the_staff.html#reception">Reception/Front Desk Staff</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="forms_instructions.html#forms">Medical Hx/Registration Form</a>'
menu2[1]='<a href="meet_the_staff.html#">Post-Periodontal Surgery Instructions</a>'
menu2[2]='<a href="meet_the_staff.html#">Post-Extraction Instructions</a>'
menu2[3]='<a href="meet_the_staff.html#">Post Root Canal Instructions</a>'

var menu3=new Array()
menu3[0]='<a href="advanced_technologies.html">Cosmetic Dental Imaging</a>'
menu3[1]='<a href="advanced_technologies.html#laser_cavity">Laser Cavity Detection</a>'
menu3[2]='<a href="advanced_technologies.html#magnification">Advanced Magnification</a>'
menu3[3]='<a href="advanced_technologies.html#radiography">Digital Radiography</a>'

var menu6=new Array()
menu6[0]='<a href="convenience_services.html">Consierge Services</a>'
menu6[1]='<a href="meet_the_staff.html#ceramist">Onsite Dental Ceramist</a>'
menu6[2]='<a href="meet_the_staff.html#specialists">Onsite Specialists</a>'

var menu7=new Array()
menu7[0]='<a href="meet_the_dentists.html#john">John J. Smith DDS</a>'
menu7[1]='<a href="meet_the_dentists.html#andrew">Andrew S. Gross DMD</a>'
menu7[2]='<a href="meet_the_staff.html#periodontist">Periodontist</a>'
menu7[3]='<a href="meet_the_staff.html#endodontist">Endodontist</a>'

var menu8=new Array()
menu8[0]='<a href="services_procedures.html#dental_implants>Dental Implants</a>'
menu8[1]='<a href="services_procedures.html#porcelain_veneers">Porcelain Veneers</a>'
menu8[2]='<a href="services_procedures.html#onlay_inlay">Porcelain Onlay/Inlay</a>'
menu8[3]='<a href="services_procedures.html#reconstructive_dentistry">Reconstructive Dentistry</a>'
menu8[4]='<a href="services_procedures.html#periodontics">Periodontics</a>'
menu8[5]='<a href="services_procedures.html#endodontics">Endodontics</a>'
menu8[6]='<a href="services_procdures.html#preventive_dentistry">Preventive Dentistry</a>'
menu8[7]='<a href="services_procdures.html#reconstructive_dentistry">Dentures Full &amp; Partial</a>'

var menu9=new Array()
menu9[0]='<a href="cosmetic_dentistry.html#cosmetic_dentistry>Cosmetic Dentistry</a>'
menu9[1]='<a href="cosmetic_dentistry.html#smile_design">Smile Design</a>'
menu9[2]='<a href="cosmetic_dentistry.html#gum_recontouring">Gingival (gum) Recontouring</a>'
menu9[3]='<a href="cosmetic_dentistry.html#cosmetic_bonding">Cosmetic Bonding</a>'
menu9[4]='<a href="cosmetic_dentistry.html#tooth_recontouring">Cosmetic Tooth Recontouring</a>'
menu9[5]='<a href="cosmetic_dentistry.html#veneers">Veneers</a>'
menu9[6]='<a href="cosmetic_dentistry.html#crowns">Porcelain Crowns</a>'
menu9[7]='<a href="cosmetic_dentistry.html#bleaching">Bleaching</a>'

var menu10=new Array()
menu10[0]='<a href="tmj.html#tmj">TMJ</a>'
menu10[1]='<a href="cosmetic_dentistry.html#orofacial_pain">Orofacial Pain</a>'
menu10[2]='<a href="cosmetic_dentistry.html#snoring">Snoring</a>'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
return totaloffset;

function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
if (menuwidth!=""){
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
else if (e.type=="click")

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWid th-15 : window.pageXOffset+window.innerWidth-15
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeig ht-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeigh t
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHe ight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
return edgeoffset

function populatemenu(what){
if (ie4||ns6)

function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"

return clickreturnvalue()

function clickreturnvalue(){
if (ie4||ns6) return false
else return true

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)

function delayhidemenu(){
if (ie4||ns6)

function clearhidemenu(){
if (typeof delayhide!="undefined")

if (hidemenu_onclick=="yes")

<title>Dental Partners of Columbia Home</title>

<div id="container">
<div id="header"> </div>
<div id="navigation">
<div align="center" class="style2">
<a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')"
onMouseout="delayhidemenu()">Meet the Staff</a> |
<a href="default2.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')"
onMouseout="delayhidemenu()">Forms and Instructions</a> |
<a href="default3.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')"
onMouseout="delayhidemenu()">Advanced Technologies</a> |
<a href="smile_gallery.html">Smile Gallery</a> |
<a href="contact.html">Contact Us</a> |
<a href="default6.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')"
onMouseout="delayhidemenu()">Convenience Services</a> |
<a href="links.html">Links</a> |
<a href="press_mentions.html">Press Mentions</a></div>
<!-- end NAVIGATION-->
<div id="imgnavigation">


<a href="meet_the_staff.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu7, '150px')"
onMouseout="delayhidemenu()"> <img src="images/meet_dentists.jpg" border="0" ></a><a href="our_office.html" ><img src="images/our_office.jpg" width="151" height="122" border="0" /></a><a href="service_procedures.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu8, '150px')"
onMouseout="delayhidemenu()"><img src="images/service_pro.jpg" width="151" height="122" border="0" /></a><a href="cosmetic_dentistry.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu9, '150px')"
onMouseout="delayhidemenu()"><img src="images/cosmetic.jpg" width="155" height="122" border="0" /></a><a href="tmj.html" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu10, '150px')"
onmouseout="delayhidemenu()"><img src="images/tmj.jpg" alt="" width="150" height="122" border="0" /></a> </div>

<div id="textbox">

<br><h3>Meet the Dentists</h3></br>
<img src="images/dr_gross.jpg" align ="right" width="91" height="136" border="0" />
<b>Andrew S. Gross DMD</b> has been practicing dentistry on the Upper East Side since graduating from Columbia University School of Dental and Oral Surgery in 1980. In 1981 he completed a residency in general dentistry at Mount Sinai Medical Center. He was then appointed to the medical center’s attending staff and in 1983, became coordinator (with Dr. Smith) of the Department of Dentistry. Several years later, Dr. Gross left Mount Sinai in order to spend more time in his practice. He was appointed director of Gramercy Park Health Associates, a medical/dental group practice. A resident of the West Side, Dr. Gross is married with three children. He loves to travel and enjoys tennis and skiing.

<p>Dr. Gross has developed an international patient base, coordinating his schedule to accommodate patients with tight traveling schedules. Working together with the dental specialists and with Danny, the in-house ceramist, Dr. Gross can usually complete the entire treatment based on the patient's timetable. When booking an appointment from out of town, please make sure to speak to Dr. Gross directly.</p>

<img src="images/dr_smith.jpg" align ="right" border="0" />
<p><b>John J. Smith DDS </b>received his dental degree from the Tufts University School of Dental Medicine in 1980. After completing his residency in general dentistry at Mount Sinai Hospital Medical Center, he became coordinator of the Department of Dentistry, a position he held for 13 years. He also was a co-founder of the medical center’s Dental Phobia Clinic and was Director of the Temporomandibular Disorders/Facial Pain Clinic. Dr. Kaplan is an associate clinical professor of the Mount Sinai School of Medicine and an associate attending of the Mount Sinai Medical Center. He has also held faculty positions at New York University College of Dentistry, The Columbia University School of Dental and Oral Surgery, and Tufts University School of Dental Medicine. </p>

<p>Dr. Smith is a past president of the American Academy of Orofacial Pain. He is widely published and has authored several books on Orofacial Pain and Temporomandibular Disorders. Many physicians and other dentists refer their “TMJ”, headache and facial pain patients to Dr. Smith. Dr.Smith is married, has three children and lives in Scarsdale, New York. He enjoys travel, tennis and golf. </p>

<div id="footer"> Site Design by derekvanderven.com &copy; 2009 </div>

01-28-2009, 10:40 PM
You already set overflow to scroll, so delete the background-attachment CSS rule.

01-28-2009, 10:47 PM
that makes my background image not move with the text in internet explorer . any more help greatly appreciated. im stuck. thanks. derek. i cant find anything on the net.

01-28-2009, 10:54 PM
And not sure if you want the horizontal scroll bar if not use

01-28-2009, 10:54 PM
Sorry I'm blank. Personally I would never create a layout like that. What's wrong with a regular web page without the scrollbars? You're not making it easier to use the site.

01-28-2009, 10:59 PM
thank you for that overflow x hidden! here is something that fixed it. but now in firefox, the background image doesnt start until halfway horizontally in the div. is there any way to fix that please? im almost there. heh. derek

here is the new page


#textbox {
background: url(images/textbox.gif) fixed;
padding:1em 1em 5em;

01-29-2009, 12:57 PM
here is a fix i got from someone that corrects the background of my scrolling div in FF IE and opera. hope this helps some other newbies . LOL.

#textbox {
#bg {
padding:1em 1em 5em;
background: url('images/textbox.gif');


01-29-2009, 01:00 PM
Sorry I'm blank. Personally I would never create a layout like that. What's wrong with a regular web page without the scrollbars? You're not making it easier to use the site.

I agree Dom. I can't see the need for it.

01-29-2009, 09:28 PM
i think my next layout will use the full page instead. thanks. derek