scubadesign Posted December 10, 2009 Share Posted December 10, 2009 Hi,Im having trouble setting my background image to scroll with the rest of the box element. So far it works perfectly in IE but for once its Firefox being a b*****d Ive tried using all background attack comands but nothing seems to help :/ive posted the element code below but if you need the whole style sheet to help please let me know. (website isnt live yet and i can publish it for awhile let) .main{background-image:url('images/title-bg.jpg'); background-repeat:repeat-x; width:518px; height:420px; float:right; clear:right; overflow: auto; position: relative;} Any help would be very much appriciated. Link to comment Share on other sites More sharing options...
roundcorners Posted December 10, 2009 Share Posted December 10, 2009 does the keyword scroll help?try:background:transparent url('images/title-bg.jpg') repeat-x scroll 0 0; Link to comment Share on other sites More sharing options...
scubadesign Posted December 10, 2009 Author Share Posted December 10, 2009 does the keyword scroll help?try:background:transparent url('images/title-bg.jpg') repeat-x scroll 0 0;Nope, thats why im having so much trouble, background attachments just wont work in firefox for some reason. Ive pasted the whole style sheet below incase anyone can see any conflicts. (please forgive the messy code but ive not cleaned it up yet).whole{height:1000px; width:700px; margin: 0 auto 0 auto; position:relative;}.head{width:699px; height:156px; background-image:url('images/line1.jpg'); background-repeat:no-repeat; clear:both; border:0px; padding:0px;} .head img {margin-left:10px; vertical-align:middle;} .head p {text-align:center; color:#373737; font-size:8pt; font-family:Tahoma;} .head a:link {color: #373737; text-decoration:none;} .head a:visited {color: #373737; text-decoration:none;} .head a:hover {color: #373737; text-decoration:underline;}.head2{width:699px; height:54px; clear:both; border:0px; padding:0px;}.nav{width:699px; height:50px; clear:right; border:0px; padding:0px; background-color:white;}.cats{width:181px; height:339px; background-image: url('images/cats-bg.jpg'); background-repeat:repeat-x; float:left; clear:left; border:0px; padding:0px; margin-bottom:0px;} .cats2 {margin-top:10px; margin-left:15px; list-style-type:square;} .cats a {text-decoration:none; padding-bottom:1px; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#78a450; font-family: arial narrow; font-size:15px; color:white;} .days {height:81px; width:181px; background-image: url('images/7DAYS.jpg'); background-repeat:no-repeat; float:left; clear:left;} .cats2 a:link {color: white;} .cats2 a:visited {color: white;} .cats2 a:hover {color: black; margin-left:10px;}.main{background-image:url('images/title-bg.jpg'); background-attachment:scroll; background-repeat:repeat-x; width:518px; height:420px; float:right; clear:right; border:0px; padding:0px; margin-bottom:0px; overflow: auto; position: relative;} .main h1 {margin:100px 330px 10px 25px; text-decoration:none; border-bottom-style:solid; border-bottom-width:2px; border-bottom-color:#e1d7bf; padding-bottom:5px; font-size:13pt; font-family:arial narrow; color:#d63500;} .main h1 a:link {color:#d63500; text-decoration:none;} .main h1 a:visited {color:#d63500; text-decoration:none;} .main h1 a:hover {color:#d63500; text-decoration:none;} .main h2 {color:#373737; font-size:10pt; font-family:Tahoma; margin:10px 25px 10px 25px; font-weight:bold;} .main p {color:#373737; font-size:8pt; font-family:Tahoma; margin:10px 25px 10px 25px;}.welcome h1{font-size:14pt; font-family:arial narrow; margin:10px 25px 10px 25px; color:#d63500; border: 0px; padding:0px; } .welcome h2 {color:#black; font-size:8pt; font-family:Tahoma; margin:-13px 25px 10px 25px;} .welcome p {color:#373737; font-size:8pt; font-family:Tahoma; margin:10px 25px 80px 25px;}.line{width:468px; height:1px; margin:10px 25px 10px 25px; background-color:#e1d7bf; }.copyright{text-align:center; color:grey; font-size:8pt; font-family:arial narrow;}img{border: 0px 0px 0px 0px; } Link to comment Share on other sites More sharing options...
fallen00sniper Posted December 12, 2009 Share Posted December 12, 2009 Add this and I believe your problem will be solved. background-attachment:scroll;orbackground-attachment:fixed; scroll allows the background to scroll with the content, fixed does exactly what it implies, it will scroll only the content and the background will remain in place. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.