problem with fixed background

  • raminr63
  • Newbie
  • Newbie
  • raminr63
  • Posts: 6

Post 3+ Months Ago

Hi

guys i want to use fixed background image for my website so used this code:

Code: [ Select ]
background-attachment:fixed


But i don't know why this not work for me?!

so i attached my source maybe some one fix this problem .
my file size is 2.5meg so i couldn't to attach but i uploaded on mediafire:

m e d i a f i r e . com/?k4c98636qzy4bda

thank you.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Need more info on the HTML and CSS of the page. Could you provide the entire block of CSS you used?
  • raminr63
  • Newbie
  • Newbie
  • raminr63
  • Posts: 6

Post 3+ Months Ago

i uploaded my source
however this is my css:

body { background:#000000 url(../img/bg_all.jpg) top center no-repeat; padding:0; margin:0; text-align:center}
.bg_pic { position:absolute; left:0; top:0; z-index:0}

But this code not work at all:
background-attachment:fixed
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

OK well I wasn't able to download the zip file from the computer I'm currently on do to the companies web filter however I did download it using my phone.

The issue is not background-attachment:fixed. In the script.js file you have
JAVASCRIPT Code: [ Select ]
/*SetBG*/
$("body").append('<img src="img/bg_all.jpg" alt="" class="bg_pic"/>');
 
  1. /*SetBG*/
  2. $("body").append('<img src="img/bg_all.jpg" alt="" class="bg_pic"/>');
  3.  


which is basically adding an image tag to the end of the file and covering your background and this is what is scrolling

This locks the background for me I've tested it on chrome Version 23.0.1271.97 m, Firefox 17.0.1, Safari 5.1.7 and Internet Explorer 9.0.8112.16421

CSS Code: [ Select ]
body { background:#000000 url(../img/bg_all.jpg) top center no-repeat; padding:0; margin:0; text-align:center; background-attachment:fixed; }
 
  1. body { background:#000000 url(../img/bg_all.jpg) top center no-repeat; padding:0; margin:0; text-align:center; background-attachment:fixed; }
  2.  
  • raminr63
  • Newbie
  • Newbie
  • raminr63
  • Posts: 6

Post 3+ Months Ago

yes in my files i have script.js and the bg cod is:

/*SetBG*/
$("body").append('<img src="img/bg_all.jpg" alt="" padding=0 margin=0/>');
setwin();

$('#topgal_fadder').fadeOut(1);
$('.mainmenu li').find('ul li:last').addClass('last');

but as i say that fixed code not work with me.

pleas can you give me a Solution
thank you.
  • ScottG
  • Proficient
  • Proficient
  • ScottG
  • Posts: 477

Post 3+ Months Ago

Well the the fixed code probably is working. but what you seem to be doing is adding an image tag to the page then setting the with to stretch to the browser width. the fixed code will not help with this method. If your doing this so the background fills the page then what I would suggest if remove or comment out
JAVASCRIPT Code: [ Select ]
$("body").append('<img src="img/bg_all.jpg" alt="" class="bg_pic"/>');
 
  1. $("body").append('<img src="img/bg_all.jpg" alt="" class="bg_pic"/>');
  2.  


and make the css like this
CSS Code: [ Select ]
body { background:#000000 url(../img/bg_all.jpg) top center no-repeat ; padding:0; margin:0; text-align:center; background-attachment:fixed; background-size: cover; }
 
  1. body { background:#000000 url(../img/bg_all.jpg) top center no-repeat ; padding:0; margin:0; text-align:center; background-attachment:fixed; background-size: cover; }
  2.  
  • raminr63
  • Newbie
  • Newbie
  • raminr63
  • Posts: 6

Post 3+ Months Ago

worked very nice.
i love you.

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: No registered users and 54 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.